기능 및 렌더링 :
이 케이스는 회전하는 큐브이고 전체는 두 개의 큐브로 구성됩니다. 바깥쪽에는 큰 입방체가 있고 안쪽에는 작은 입방체가 있고, 처음에는 전체 입방체가 닫혀 있고 자유롭게 회전합니다. 마우스를 가리키면 크고 작은 입방체가 확장됩니다.
구조 부분 :
<body>
<div class="box">
<div><img src="img/01.png" alt="" /></div>
<div><img src="img/02.png" alt="" /></div>
<div><img src="img/03.png"/></div>
<div><img src="img/04.png"/></div>
<div><img src="img/05.png"/></div>
<div><img src="img/06.png"/></div>
<div class="d1"><img src="img/bg01.jpg"/></div>
<div class="d1"><img src="img/bg1.jpg"/></div>
<div class="d1"><img src="img/bg2.jpg"/></div>
<div class="d1"><img src="img/bg3.jpg"/></div>
<div class="d1"><img src="img/bg4.jpg"/></div>
<div class="d1"><img src="img/bg5.jpg"/></div>
</div>
</body>
구조 부분은 주로 두 부분으로 나뉩니다. 하나는 외부 큰 큐브 (d1)이고 다른 하나는 내부 작은 큐브입니다.
<style type="text/css">
body {
background: url(img/b.jpg);
background-size: cover;
}
.box { //给box设置动画
transform: rotateZ(-45deg);
border: 1px solid red;
margin: 280px auto;
width: 300px;
height: 300px;
position: relative;
animation-duration:5s; //设置周期时间
animation-name:name ; //动画关键帧名称
animation-timing-function:linear ; //设置运动曲线
animation-iteration-count: infinite; 播放次数：无限循环
transition: all 1s;
transform-style: preserve-3d; //开启3D，以3D效果显示
}
.box div {
margin: 50px 0 0 50px;
transition: all 1s;
height: 200px;
width: 200px;
position: absolute;
opacity: .5;
/*border-radius: 50%;*/
}
img {
width: 200px;
height: 200px;
}
.d1 img {
width: 400px;
height: 400px;
}
@keyframes name{//动画的效果，以各个轴为基准旋转360度
from{transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)}
to{transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg)}
}
.box .d1 {
width: 400px;
height:400px;
background-color: darkgray;
left: -50px;
top: -50px;
margin: 0;
padding: 0;
opacity: 1;
border: 1px solid red;
}
//设置小盒子每个面离原点(z轴距离)100px，并且每个面做一定的旋转，围成一个正方体
.box div:nth-child(1) {
background-color: skyblue;
transform: translateZ(100px);
}
.box div:nth-child(2) {
transform: rotateY(90deg) translateZ(100px);
background-color: red;
}
.box div:nth-child(3) {
transform: rotateY(90deg) translateZ(-100px);
background-color: yellow;
}
.box div:nth-child(4) {
transform: rotateX(90deg) translateZ(100px);
background-color: pink;
}
.box div:nth-child(5) {
transform: rotateX(90deg) translateZ(-100px);
background-color: orange;
}
.box div:nth-child(6) {
transform: translateZ(-100px);
background-color: blue;
}
//设置鼠标悬浮时，小盒子的变化：
//每个面离原点的距离变为150px，每个面就不会挨在一起，有一定的距离
.box:hover div:nth-child(1) {
transform: translateZ(150px);
}
.box:hover div:nth-child(2) {
transform: rotateY(90deg) translateZ(150px);
}
.box:hover div:nth-child(3) {
transform: rotateY(90deg) translateZ(-150px);
}
.box:hover div:nth-child(4) {
transform: rotateX(90deg) translateZ(150px);
}
.box:hover div:nth-child(5) {
transform: rotateX(90deg) translateZ(-150px);
}
.box:hover div:nth-child(6) {
transform: translateZ(-150px);
}
//设置大盒子每个面离原点(z轴距离)200px，且每个面做一定角度的旋转，围成正方体
.box div:nth-last-child(6) {
transform: translateZ(200px);
}
.box div:nth-last-child(5) {
transform: rotateY(90deg) translateZ(200px);
}
.box div:nth-last-child(4) {
transform: rotateY(90deg) translateZ(-200px);
}
.box div:nth-last-child(3) {
transform: rotateX(90deg) translateZ(200px);
}
.box div:nth-last-child(2) {
transform: rotateX(90deg) translateZ(-200px);
}
.box div:nth-last-child(1) {
transform: translateZ(-200px);
}
//设置鼠标悬浮时，大盒子的变化：
//每个面离原点的距离变为300px，每个面就不会挨在一起，有一定的距离，并且每个面的透明度发生改变，
这样就能看到里面的小盒子状态
.box:hover div:nth-last-child(6) {
opacity: .5;
transform: translateZ(300px);
}
.box:hover div:nth-last-child(5) {
opacity: .5;
transform: rotateY(90deg) translateZ(300px);
}
.box:hover div:nth-last-child(4) {
opacity: .5;
transform: rotateY(90deg) translateZ(-300px);
}
.box:hover div:nth-last-child(3) {
opacity: .5;
transform: rotateX(90deg) translateZ(300px);
}
.box:hover div:nth-last-child(2) {
opacity: .5;
transform: rotateX(90deg) translateZ(-300px);
}
.box:hover div:nth-last-child(1) {
opacity: .5;
transform: translateZ(-300px);
}
</style>