Representaciones de funciones &&:
Este caso es un cubo giratorio y el conjunto está compuesto por dos cubos. Hay un cubo grande en el exterior y un cubo pequeño en el interior. Todo el cubo está cerrado al principio y gira libremente. Cuando el mouse está suspendido, los cubos grandes y pequeños se expanden.
Parte de la estructura:
<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>
La parte de la estructura se divide principalmente en dos partes, una es el cubo grande exterior (d1) y la otra es el cubo pequeño interior
<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>