Rumah > Artikel > hujung hadapan web > 如何使用css实现翻转图片的效果（附代码）
如何使用css实现翻转图片的效果（附代码）
- 不言asal
- 2018-09-25 17:57:124412semak imbas
本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
具体效果图如下：
主要用到的技术除了3D翻转和定位 ，还用到了一个新的属性 backface-visibility：visable|hidden;
该属性主要是用来设定元素背面是否可见。
具体的步骤如下：
1、写出页面主体，
dc6dce4a544fdca2df29d5ac0ea9906b 77159b047218d7f27ceda3873a1c2fc8 c9436b31b245ae8ecaa1f2512760254b 16b28748ea4df4d9c2150843fecfba68
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>Atas ialah kandungan terperinci 如何使用css实现翻转图片的效果（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何使用CSS实现滚动的图片栏（附代码）Artikel seterusnya：如何用CSS制作一个三角形（附代码）