<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>正方体 3d</title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
position: relative;
margin: 200px auto;
transform-style: preserve-3d;
animation: move infinite linear 15s;
}
.box div {
width: 100%;
height: 100%;
position: absolute;
transition: transform 5s;
}
.box div:nth-child(1) {
transform: rotateX(0deg) translateZ(200px);
background: blue;
}
.box div:nth-child(2) {
transform: rotateX(90deg) translateZ(200px);
background: red;
}
.box div:nth-child(3) {
transform: rotateX(180deg) translateZ(200px);
background: green;
}
.box div:nth-child(4) {
transform: rotateX(270deg) translateZ(200px);
background: pink;
}
.box div:nth-child(5) {
transform: rotateY(90deg) translateZ(200px);
background: orange;
}
.box div:nth-child(6) {
transform: rotateY(270deg) translateZ(200px);
background: black;
}
.box:hover div:nth-child(1) {
transform: rotateX(0deg) translateZ(400px);
}
.box:hover div:nth-child(2) {
transform: rotateX(90deg) translateZ(400px);
}
.box:hover div:nth-child(3) {
transform: rotateX(180deg) translateZ(400px);
}
.box:hover div:nth-child(4) {
transform: rotateX(270deg) translateZ(400px);
}
.box:hover div:nth-child(5) {
transform: rotateY(90deg) translateZ(400px);
}
.box:hover div:nth-child(6) {
transform: rotateY(270deg) translateZ(400px);
}
@-webkit-keyframes move {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>