transform-style: preserve-3d
嵌定元素怎样在三维空间中呈现
| 值 | 描述 |
|---|---|
| flat | 表示所有子元素在2D平面呈现。 |
| preserve-3d | 表示所有子元素在3D空间中呈现。 |
transform-origin
设置旋转元素的基点位置
2D转换元素能够改变元素X轴和Y轴，3D转换还可以改变Z轴。
<!--
* @description:
* @author: 陈娇娇 <jiaojiao.chen01@hand-china.com>
* @Date: 2020-12-25 08:45:54
-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D魔方</title>
<style>
#box{
transform-style: preserve-3d;
transform-origin: 50px 50px 0;
animation: rotation 5s infinite linear;
}
#box div{
/* absolute是关键 */
position: absolute;
height: 100px;
width: 100px;
background: rgb(202, 172, 0);
opacity: 0.7;
font-size: 100px;
line-height: 100px;
text-align: center;
border: 3px solid;
box-sizing: border-box;
}
.one{
transform: translateZ(50px);
}
.two{
transform: translateZ(-50px);
}
.three{
transform: translateX(-50px) rotateY(-90deg);
}
.four{
transform: translateX(50px) rotateY(90deg);
}
.five{
transform: translateY(50px) rotateX(-90deg);
}
.six{
transform: translateY(-50px) rotateX(90deg);
}
@keyframes rotation {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}
}
</style>
</head>
<body>
<div id="view" style="width: 160px; height: 160px; margin: 80px auto 0 auto;">
<div id="box">
<div class="one">A</div>
<div class="two">B</div>
<div class="three">C</div>
<div class="four">D</div>
<div class="five">E</div>
<div class="six">F</div>
</div>
</div>
</body>
</html>
