纯CSS实现图片左右翻转效果(附代码)

青灯夜游
Freigeben: 2021-02-25 10:20:53
nach vorne
4628 Leute haben es durchsucht

纯CSS实现图片左右翻转效果(附代码)

【推荐教程:CSS视频教程

CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见。

效果图如下:

1.gif

具体的步骤如下:

1、写出页面主体,

Nach dem Login kopieren

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

div img { width: 250px; height: 170px; position: absolute; top: 0; left: 0; transition: all 1s; }
Nach dem Login kopieren

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

div img:first-child { z-index: 1; backface-visibility: hidden; }
Nach dem Login kopieren

4、添加旋转180度

div:hover img { transform: rotateY(180deg); }
Nach dem Login kopieren

完整代码:

      Document  
  
Nach dem Login kopieren

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt von纯CSS实现图片左右翻转效果(附代码). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!