纯CSS实现图片左右翻转效果的方法 - 行业资讯 - 肥雀云

　　介绍

这篇“纯CSS实现图片左右翻转效果的方法”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“纯CSS实现图片左右翻转效果的方法”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

CSS翻转图片主要用到的技术除了3 d翻转和定位,还用到了一个属性<代码> backface-visibility:视觉|隐藏。该属性主要是用来设定元素背面是否可见。

效果图如下:

具体的步骤如下:

1,写出页面主体,

& lt; div> 　　,,& lt; img src=https://www.yisu.com/zixun/巴枷?b.jpg”alt=" "> 　　

2,通过定位使两张图片叠加在一起

div img { 　　,,,,,,,,,,,宽度:,250 px; 　　,,,,,,,,,,,身高:,170 px; 　　,,,,,,,,,,,位置:,绝对; 　　,,,,,,,,,,,:,0; 　　,,,,,,,,,,,左:,0; 　　,,,,,,,,,,,的转变:,all 1 s; 　　,,,,,,,}

3,设置第一张图片背面不可见

div img: first-child { 　　,,,,,,,,,,,z - index:, 1; 　　,,,,,,,,,,,backface-visibility:,隐藏; 　　,,,,,,,}

4,添加旋转180度

div: hover img { 　　,,,,,,,,,,,变换:,rotateY(180度); 　　,,,,,,,}

完整代码:

& lt; ! DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta charset=癠TF-8"比; 　　,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　,,,& lt; meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比; 　　,,,& lt; title> Document 　　,,,& lt; style> 　　,,,,,,,/*,backface-visibility */,,,,,,, 　　,,,,,,,div { 　　,,,,,,,,,,,宽度:,250 px; 　　,,,,,,,,,,,身高:,170 px; 　　,,,,,,,,,,,保证金:,100 px 汽车; 　　,,,,,,,,,,,位置:,相对; 　　,,,,,,,} 　　,,,,,,, 　　,,,,,,,div img { 　　,,,,,,,,,,,宽度:,250 px; 　　,,,,,,,,,,,身高:,170 px; 　　,,,,,,,,,,,位置:,绝对; 　　,,,,,,,,,,,:,0; 　　,,,,,,,,,,,左:,0; 　　,,,,,,,,,,,的转变:,all 1 s; 　　,,,,,,,} 　　,,,,,,, 　　,,,,,,,div img: first-child { 　　,,,,,,,,,,,z - index:, 1; 　　,,,,,,,,,,,backface-visibility:,隐藏; 　　,,,,,,,} 　　,,,,,,, 　　,,,,,,,div: hover img { 　　,,,,,,,,,,,变换:,rotateY(180度); 　　,,,,,,,} 　　,,,& lt;/style> 　　& lt;/head> 　　& lt; body> 　　,,,& lt; div> 　　,,,,,,,& lt; img src=https://www.yisu.com/zixun/巴枷?b.jpg”alt=" "> 　　

以上是“纯CSS实现图片左右翻转效果的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!