今天,带来的是纯css3的效果--图片3D翻转。
请看效果:http://webfront.verynet.cc/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。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。