本文主要是介绍CSS：实现背面图片翻转，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
知识点
- perspective 视距
- backface-visibility: hidden;
背对屏幕隐藏
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>body {perspective: 400px;}div {width: 300px;height: 450px;margin: 100px auto;position: relative;}div img{width: 100%;height: 450px;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="img/fan.png" alt=""><img src="img/zheng.png" alt="">
</div>
</body>
</html>
运行效果
点击后自动旋转，背对隐藏
这篇关于CSS：实现背面图片翻转的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
