body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vh;
background: url(images/0.jpg) no-repeat center/cover;
/*center/cover中cover是最优的解决方案,center 水平居中 */
}
.cube {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto 0;
transform-style: preserve-3d;
animation: roll 4s linear infinite;
/* 开启父元素的3d模式 */
}
@keyframes roll {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
/* @keyframes rotate是定义动画*/
.small {
/* float: left; 半脱离文档流 */
position: absolute;
top: 30px;
right: 100px;
/* 父亲相对定位position: relative;,子级给绝对定位position: absolute;,子级参照父级有一个偏移量,实现重叠 */
width: 300px;
height: 300px;
box-shadow: 0 0 50px 20px skyblue;
perspective: 1000px;
/* 最好加子元素上面,大小一致 */
transition:all 1s ease;
}
.small:nth-child(1) {
transform: rotateX(90deg) translateZ(150px) scale(1);
background: url(images/9.jpg) no-repeat center/cover;
border-radius: 20px;
}
.small:nth-child(2) {
transform: rotateX(-90deg) translateZ(150px) scale(1);
background: url(images/10.jpg) no-repeat center/cover;
border-radius: 20px;
}
.small:nth-child(3) {
transform: rotateY(90deg) translateZ(150px) scale(1);
background: url(images/11.jpg) no-repeat center/cover;
border-radius: 20px;
}
.small:nth-child(4) {
transform: rotateY(-90deg) translateZ(150px) scale(1);
background: url(images/12.jpg) no-repeat center/cover;
border-radius: 20px;
}
.small:nth-child(5) {
transform: translateZ(150px) scale(1);
background: url(images/15.jpg) no-repeat center/cover;
border-radius: 20px;
}
.small:nth-child(6) {
transform: translateZ(-150px) scale(1);
background: url(images/16.jpg) no-repeat center/cover;
border-radius: 20px;
}
.cube:hover .small:nth-child(1) {
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .small:nth-child(2) {
transform: rotateX(-90deg) translateZ(200px);
}
.cube:hover .small:nth-child(3) {
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .small:nth-child(4) {
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .small:nth-child(5) {
transform: translateZ(200px);
}
.cube:hover .small:nth-child(6) {
transform: translateZ(-200px);
}