初始效果图
html
<div class="box-parent">
<span class="box-children">1</span>
<span class="box-children">2</span>
<span class="box-children">3</span>
<span class="box-children">4</span>
<span class="box-children">5</span>
<span class="box-children">6</span>
</div>
css
<style>
.box-parent {
height: 200px;
width: 200px;
margin: 200px auto;
/* 开启3d模式 */
transform-style: preserve-3d;
/* 是否近身效果和距离 */
perspective: 600px;
/*默认旋转角度*/
transform: rotateY(45deg) rotateX(45deg);
position: relative;
transition: 2s;
}
.box-parent:hover {
transform: rotateY(360deg) rotateX(90deg);
}
.box-children {
width: 200px;
height: 200px;
background: rgb(243, 225, 225);
border: 1px solid blue;
/*运动时间*/
/* transition: 1s; */
position: absolute;
opacity: 0.6;
font-size: 30px;
text-align: center;
line-height: 200px;
color: #000;
}
/* .box-children:hover { */
/*
perspective: 100px; 代表贴脸100px间距
translateX 沿着x轴移动 200px代表向右边移动 -200px向左边移动
translateY 沿着y轴移动 200px代表向下移动 -200px向上边移动
translateZ 沿着z轴移动 200px代表向前移动 -200px向后边移动
rotateY 90deg代表沿着y轴向左上旋转90度 -90deg代表沿着y轴向右上边旋转90度
rotateX 90deg沿着x轴下上方旋转90度 -90deg 沿着x轴右上方旋转90度
rotateZ 90deg沿着Z轴右边旋转90度 -90deg 沿着Z轴左边旋转90度
*/
/* transform: rotateZ(90deg);
} */
/* 左边面 */
.box-parent span:nth-child(1) {
transform: translateZ(100px);
background: rgb(209, 93, 93);
}
/* 后面面 */
.box-parent span:nth-child(2) {
transform: rotateY(90deg) translateZ(100px);
background: rgb(143, 224, 143);
}
/* 右边面 */
.box-parent span:nth-child(3) {
transform: rotateY(180deg) translateZ(100px);
background: rgb(223, 179, 219);
}
/* 前面面 */
.box-parent span:nth-child(4) {
transform: rotateY(270deg) translateZ(100px);
background: rgb(235, 67, 221);
}
/* 最上面 */
.box-parent span:nth-child(5) {
transform: rotateX(90deg) translateZ(100px);
background: rgb(241, 238, 33);
}
/* 最下面 */
.box-parent span:nth-child(6) {
transform: rotateX(-90deg) translateZ(100px);
background: rgb(129, 129, 125);
}
</style>