CSS3之图片3D翻转效果(网页效果每日一更)_html/css

　　请看效果：http://localhost:63342/webfront/PC/rotate.html

　　这个效果主要还是运用了CSS3的transform变形属性，与上个效果不同的是，这次并不是动画，所以没有采用animation属性，而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换，并产生一个过渡效果。详情请看代码。

　　HTML结构：

 1 2 3  4 5 这是小狗哦！！ 6 7 8 9 10 11 这是小狗哦！！12 13 14 

　　CSS样式：

 1 

　　代码很容易理解，先为图片设置一个初始旋转角度，因为它是先展示的，所以角度为180deg，透明度为1。当鼠标滑过时，改变角度和透明度，使其翻转。而背后的文字也是如此道理。

　　享受代码，享受生活，网页效果，每日一更。