正方体 3d 代码

最新推荐文章于 2021-07-28 09:02:58 发布

apcoyxpp37613

最新推荐文章于 2021-07-28 09:02:58 发布

阅读量427

点赞数

原文链接：http://www.cnblogs.com/wwwymk3/p/10311081.html

版权

<!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>