效果图
![](https://i-blog.csdnimg.cn/direct/cad91671e8ea42c6a1d3345c47eb159e.gif)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空间转换</title>
<style>
article {
position: relative;
margin: 100px auto;
width: 100px;
height: 100px;
/* 根据旋转方向判断空间旋转的取值正负:
左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为旋转正值方向 */
transform: rotateX(-20deg) rotateY(-30deg);
/* 立体呈现 transform-style
设置元素的子元素是位于3D空间中还是平面中
flat:子级处于平面中
preserve-3d:子级处于3D空间 */
transform-style: preserve-3d;
/* 视距 perspective
指定了观察者与平面的距离,为元素添加透视效果
取值范围一般为800-1200px
注:添加给父级 */
perspective: 1200px;
transition: all 2s;
}
article:hover {
transform: rotateX(-20deg) rotateY(-390deg) scale3d(2, 2, 2);
}
div {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.front {
background-color: pink;
transform: translateZ(50px);
}
.back {
background-color: orange;
transform: translateZ(-50px);
}
.top {
background-color: skyblue;
transform: rotateX(90deg) translateZ(50px);
/* 注:旋转会改变元素的坐标轴 */
}
.bottom {
background-color: burlywood;
transform: rotateX(90deg) translateZ(-50px);
}
.left {
background-color: greenyellow;
transform: rotateY(90deg) translateZ(-50px);
}
.right {
background-color: yellow;
transform: rotateY(90deg) translateZ(50px);
}
</style>
</head>
<body>
<article>
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</article>
</body>
</html>