CSS3之图片3D翻转效果(网页效果每日一更)_html/css_WEB-ITnose
程序员文章站
2022-03-30 08:39:11
...
今天,带来的是纯CSS3的效果--图片3D翻转。
请看效果:http://localhost:63342/webfront/PC/rotate.html
这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果。详情请看代码。
HTML结构:
123 485 这是小狗哦!! 679 101411 这是小狗哦!!1213
CSS样式:
1
代码很容易理解,先为图片设置一个初始旋转角度,因为它是先展示的,所以角度为180deg,透明度为1。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。
享受代码,享受生活,网页效果,每日一更。