深圳市专业的做网站,建设招聘网站,深圳网站优化项目,北京城乡建设部网站首页北京图片翻转 原文:图片翻转本人录制技术视频地址#xff1a;https://edu.csdn.net/lecturer/1899 欢迎观看。这一节继续为大家介绍CSS3的动画效果: 图片翻转。 在iOS中的章节中#xff0c;我也介绍过类似的效果#xff0c;如果感兴趣的话#xff0c;请点击这里查看#xff1a… 图片翻转 原文:图片翻转 本人录制技术视频地址https://edu.csdn.net/lecturer/1899 欢迎观看。这一节继续为大家介绍CSS3的动画效果: 图片翻转。 在iOS中的章节中我也介绍过类似的效果如果感兴趣的话请点击这里查看动画特效一图片翻转 。先看看最终的效果图一、所用素材 两张图片的大小均为258 * 258。二、思路分析从最终的效果图可以看出 Baby 默认是显示在前面的 而 小明 是显示在后面的。并且旋转过来之后 小明 也应该是正面显示在前面如素材所列出的。那么默认情况下 小明 应该显示在后面所以它需要绕着y轴旋转180°。立体图如下:三、代码分析1. HTML代码bodydiv idboxdiv classxiaoming/divdiv classangelababy/div/div
/body2. CSS代码:style typetext/css#box{width:258px;height:258px;position: relative;}#box .xiaoming{width:258px;height:258px;position: absolute;top:0;left:0;border-radius:129px;-webkit-transform:rotateY(-180deg);/* FireFox对backface-visibility的支持有点问题*/-webkit-backface-visibility:hidden;background: url(xiaoming.png) no-repeat;transition:all 2s ease 0s;}#box .angelababy{width:258px;height:258px;position: absolute;top:0;left:0;border-radius:129px;-webkit-transform:rotateY(0deg);-webkit-backface-visibility:hidden;background: url(angelababy.png) no-repeat;transition:all 2s ease 0s;}#box:hover .xiaoming{-webkit-transform:rotateY(0deg);}#box:hover .angelababy{-webkit-transform:rotateY(-180deg);}/style1#box 是父容器用来存放 Baby 和 小明 的图片信息, 并且它的大小是 258 * 258, 就是所用素材图片的大小。因为它是父容器所以设置position: relative.2由于Baby 和 小明 都是圆形显示所以设置他们的 border-radius 为 129px; 即为图片宽度的一半。3由于 小明 默认是在后面的而 Baby 是正面显示的所以设置-webkit-transform属性值分别为 rotateY(-180deg) 和 rotateY(0)。4-webkit-backface-visibility 这个属性如果不设置的话图片就算翻转180°之后还是可以看到翻转之后的图片的这样的话在翻转过程中两张图片就会同时看到了这样就达不到想要的效果了大家可以将代码中的这个属性注释掉可以看看效果。5transition这个属性是CSS3的一个特有属性可以方便的用来执行动画过度效果。对这个属性的支持主流浏览器如下:这个属性各个值的含义如下transition-property规定设置过渡效果的 CSS 属性的名称。transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing-function规定速度效果的速度曲线。transition-delay定义过渡效果何时开始。本例中所用的这个属性的第一个值是设置为all。所以当元素有任何属性值发生变化的话都会触发这个属性执行动画。6:hover 伪类就会触发鼠标进入或者离开时候的事件而它触发的是元素的旋转属性因此就会调用transition属性进行图片的翻转效果。 posted on 2019-05-04 18:13 NET未来之路 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/lonelyxmas/p/10809234.html
