在盒子(舞台)中添加样式:
transform: rotate3d(1, 1, 1, 50deg); /*给盒子(舞台)进行旋转,这样才能出现视角*/
transform-style: preserve-3d; /*让元素保留3D变换后的效果*/
<style>
.box {
width: 500px;
height: 500px;
/* background-color: rgba(0, 0, 0, 0.1); */
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
transform: rotate3d(1, 1, 1, 50deg); /*给盒子(舞台)进行旋转,这样才能出现视角*/
transform-style: preserve-3d; /*让元素保留3D变换后的效果*/
}
.box > div {
width: 300px;
height: 300px;
position: absolute;
}
/* 前 */
.box > div:first-of-type {
background-color: rgba(216, 29, 15, 0.5);
transform: translateZ(150px);
}
/* 后 */
.box > div:nth-of-type(2) {
background-color: rgba(22, 172, 29, 0.5);
transform: translateZ(-150px) rotateX(180deg);
}
/* 上 */
.box > div:nth-of-type(3) {
background-color: rgba(101, 19, 207, 0.5);
transform: translateY(-150px) rotateX(-90deg);
}
/* 下 */
.box > div:nth-of-type(4) {
background-color: rgba(176, 209, 28, 0.5);
transform: translateY(150px) rotateX(-90deg);
}
/* 左 */
.box > div:nth-of-type(5) {
background-color: rgba(207, 34, 129, 0.5);
transform: translateX(-150px) rotateY(-90deg);
}
/* 右 */
.box > div:nth-of-type(6) {
background-color: rgba(129, 77, 226, 0.5);
transform: translateX(150px) rotateY(90deg);
}
</style>
</head>
<body onload="f();">
<div class="box">
<div>前</div>
<div>后</div>
<div>上</div>
<div>下</div>
<div>左</div>
<div>右</div>
</div>
<script>
function f() {
let i = 30;
setInterval(() => {
i++;
document.querySelector('.box').setAttribute('style', 'transform: rotate3d(1, 1, 0, '+i+'deg);');
}, 100);
}
</script>
</body>
景深透视效果:
左手法则:大拇指指向坐标轴的下方向,手指环绕方向为正方向
景深透视样式属性:
/* 添加透视景深效果:视角位置在内部或者外部---值小于元素宽度则视角在内部,否则在外部 */
perspective: 250px;
/* 设置透视的观察角度:设置视角位置,0px 0px表示在正中心,向左看,左边值要减小,反之,右边值要减小*/
perspective-origin: 0px 0px;
从内部看:
.box {
width: 500px;
height: 500px;
/* background-color: rgba(0, 0, 0, 0.1); */
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
transform: rotate3d(1, 1, 1, 50deg); /*给盒子(舞台)进行旋转,这样才能出现视角*/
transform-style: preserve-3d; /*让元素保留3D变换后的效果*/
/* 添加透视景深效果 */
perspective: 10px;
}
从正中心看:
.box {
width: 500px;
height: 500px;
/* background-color: rgba(0, 0, 0, 0.1); */
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
transform: rotate3d(1, 1, 1, 50deg); /*给盒子(舞台)进行旋转,这样才能出现视角*/
transform-style: preserve-3d; /*让元素保留3D变换后的效果*/
/* 添加透视景深效果 */
perspective: 10px;
/* 设置透视的观察角度 */
perspective-origin: 0px 0px;
}