欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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结构:

 1     
2
3 CSS3之图片3D翻转效果(网页效果每日一更)_html/css_WEB-ITnose 4
5 这是小狗哦!! 6
7
8
9 CSS3之图片3D翻转效果(网页效果每日一更)_html/css_WEB-ITnose10
11 这是小狗哦!!12
13
14

  CSS样式:

 1 

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

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