参考
①张鑫旭http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
②CODEPEN优秀 圣诞老人https://codepen.io/Alireza29675/pen/KwgwMy
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reverse</title>
</head>
<style>
.divin{
/*perspective: 800px;*/
width: 250px;
height: 350px;
}
.down{
/*perspective: 800px;*/
width: 250px;
height: 350px;
position: relative;
top:-350px;
transform:rotateY(180deg);
}
.out{
backface-visibility: hidden;
position: absolute;
left: 800px;
perspective: 800px;
width: 250px;
height: 350px;
transform-style: preserve-3d;
transition: transform 0.5s linear;
}
</style>
<body>
<div class="out">
<div class="divin" onclick="rotate()"><img src="C:\Users\Administrator\Desktop\ife%2F任务四设计稿\任务四设计稿\正面.jpg" alt="up"></div>
<div class="down"><img src="C:\Users\Administrator\Desktop\ife%2F任务四设计稿\任务四设计稿\反面.jpg" alt="down"></div>
</div>
</body>
<script>
function rotate(){
var b1 = document.querySelector(".out");
b1.style.transform = "rotateY(180deg)";
}
</script>
</html>
主要点
①perspective属性
②transform-style:preserve-3d;
③backface-visibility:hidden