纯 CSS 是怎么实现图片左右翻转的? 下面本篇文章就来给大家通过示例来介绍一下使用 CSS 实现翻转图片效果的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 翻转图片主要用到的技术除了 3D 翻转和定位 , 还用到了一个属性 backface-visibility:visable|hidden; 该属性主要是用来设定元素背面是否可见.
效果图如下:
具体的步骤如下:
1, 写出页面主体,
- <div>
- <img src="Images/b.jpg" alt="">
- <img src="Images/c.jpg" alt="">
- </div>
2, 通过定位使两张图片叠加在一起
- div img {
- width: 250px;
- height: 170px;
- position: absolute;
- top: 0;
- left: 0;
- transition: all 1s;
- }
3, 设置第一张图片背面不可见
- div img:first-child {
- z-index: 1;
- backface-visibility: hidden;
- }
4, 添加旋转 180 度
- div:hover img {
- transform: rotateY(180deg);
- }
完整代码:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- /* backface-visibility */ div { width: 250px; height: 170px; margin: 100px
- auto; position: relative; } div img { width: 250px; height: 170px; position:
- absolute; top: 0; left: 0; transition: all 1s; } div img:first-child {
- z-index: 1; backface-visibility: hidden; } div:hover img { transform: rotateY(180deg);
- }
- </style>
- </head>
- <body>
- <div>
- <img src="Images/b.jpg" alt="">
- <img src="Images/c.jpg" alt="">
- </div>
- </body>
- </HTML>
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/16141.html