<!DOCTYPE html>
<html lang="en">
<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>3d变形</title>
<style>
body{
perspective: 500px;
}
.box{
width: 100px;
height: 100px;
margin: 20px auto;
transition: all 2s;
}
#d1{
background-color: royalblue;
transform-origin: 0% 50%;
}
#d1:hover{
transform: rotateY(-180deg);
}
#d2{
background-color: salmon;
}
/* 电脑网页上的3D,横是x轴,竖是y轴 前后是z轴 */
#d2:hover{
transform: rotateX(360deg) translateZ(-200px) rotateY(360deg);
}
</style>
</head>
<body>
<div id="d1" class="box">
3d变形效果
</div>
<div id="d2" class="box">
</div>
</body>
</html>