介绍 & lt; p>
& lt; img src=https://www.yisu.com/zixun/巴枷?b.jpg”alt=" ">
p img {
宽度:250 px;
身高:170 px;
位置:绝对的;
上图:0;
左:0;
过渡:1;
} p img:第一个孩子{
z - index: 1;
backface-visibility:隐藏;
} p:悬停img {
变换:rotateY(180度);
} & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比;
& lt; title> Document
& lt; style>/* backface-visibility */p {
宽度:250 px;
身高:170 px;
保证金:100 px的汽车;
位置:相对;
}
p img {
宽度:250 px;
身高:170 px;
位置:绝对的;
上图:0;
左:0;
过渡:1;
}
p img:第一个孩子{
z - index: 1;
backface-visibility:隐藏;
}
p:悬停img {
变换:rotateY(180度);
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p>
& lt; img src=https://www.yisu.com/zixun/巴枷?b.jpg”alt=" ">
小编给大家分享一下CSS3怎么实现翻转图片效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
具体效果图如下:
主要用到的技术除了3 d翻转和定位,还用到了一个新的属性 <强> backface-visibility:视觉|隐藏。
该属性主要是用来设定元素背面是否可见。
具体的步骤如下:
1,写出页面主体,
2,通过定位使两张图片叠加在一起
3,设置第一张图片背面不可见
4,添加旋转180度
最后给出完整代码