热搜:NVER node 开发 php

在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose

2024-11-21 23:10:02
在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose

今天,带来的是纯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。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。