html5+css3绘制嵌套展开旋转立方体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>嵌套展开旋转立方体</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0;
}
.warp {
width: 200px;
height: 200px;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
position: absolute;
transform: rotate3d(1, 1, 0, -30deg);
transform-style: preserve-3d;
animation: donghua 5s 0.2s linear infinite;
/* 旋转动画 */
}
/* 旋转动画 */
@keyframes donghua {
0% {
transform: rotateY(0) rotateX(30deg);
}
100% {
transform: rotateY(360deg) rotateX(30deg);
}
}
.warp1 {
width: 100px;
height: 100px;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
position: absolute;
transform: rotate3d(1, 1, 0, 0);
transform-style: preserve-3d;
}
.warp .box {
width: 200px;
height: 200px;
font-size: 250px;
text-align: center;
position: absolute;
line-height: 200px;
}
.warp1 .box {
width: 100px;
height: 100px;
font-size: 125px;
text-align: center;
position: absolute;
line-height: 100px;
}
.warp .box:nth-child(1) {
background: rgba(255, 0, 0, 0.6);
transform: translateZ(100px);
}
.warp .box:nth-child(2) {
background: rgba(0, 255, 0, 0.6);
transform: translateZ(-100px) rotateY(180deg);
}
.warp .box:nth-child(3) {
background: rgba(0, 0, 255, 0.6);
transform: translateX(-100px) rotateY(-90deg);
}
.warp .box:nth-child(4) {
background: rgba(255, 255, 0, 0.6);
transform: translateX(100px) rotateY(90deg);
}
.warp .box:nth-child(5) {
background: rgba(255, 100, 100, 0.6);
transform: translateY(-100px) rotateX(90deg);
}
.warp .box:nth-child(6) {
background: rgba(255, 0, 255, 0.6);
transform: translateY(100px) rotateX(-90deg);
}
.warp1 .box:nth-child(1) {
background: rgba(220, 20, 60, 1);
transform: translateZ(50px);
}
.warp1 .box:nth-child(2) {
background: rgba(220, 20, 60, 1);
transform: translateZ(-50px) rotateY(180deg);
}
.warp1 .box:nth-child(3) {
background: rgba(220, 20, 60, 1);
transform: translateX(-50px) rotateY(-90deg);
}
.warp1 .box:nth-child(4) {
background: rgba(220, 20, 60, 1);
transform: translateX(50px) rotateY(90deg);
}
.warp1 .box:nth-child(5) {
background: rgba(220, 20, 60, 1);
transform: translateY(-50px) rotateX(90deg);
}
.warp1 .box:nth-child(6) {
background: rgba(220, 20, 60, 1);
transform: translateY(50px) rotateX(-90deg);
}
.warp:hover > div:nth-child(1) {
animation: donghua1 5s linear infinite;
}
.warp:hover > div:nth-child(2) {
animation: donghua2 5s linear infinite;
}
.warp:hover > div:nth-child(3) {
animation: donghua3 5s linear infinite;
}
.warp:hover > div:nth-child(4) {
animation: donghua4 5s linear infinite;
}
.warp:hover > div:nth-child(5) {
animation: donghua5 5s linear infinite;
}
.warp:hover > div:nth-child(6) {
animation: donghua6 5s linear infinite;
}
@keyframes donghua1 {
0% {
transform: rotateZ(0) translateZ(200px);
}
100% {
transform: rotateZ(360deg) translateZ(200px);
}
}
@keyframes donghua2 {
0% {
transform: rotateZ(0) translateZ(-200px) rotateY(180deg);
}
100% {
transform: rotateZ(360deg) translateZ(-200px) rotateY(180deg);
}
}
@keyframes donghua3 {
0% {
transform: rotateX(0) translateX(-200px) rotateY(-90deg);
}
100% {
transform: rotateX(360deg) translateX(-200px) rotateY(-90deg);
}
}
@keyframes donghua4 {
0% {
transform: rotateX(0) translateX(200px) rotateY(90deg);
}
100% {
transform: rotateX(360deg) translateX(200px) rotateY(90deg);
}
}
@keyframes donghua5 {
0% {
transform: rotateY(0) translateY(-200px) rotateX(90deg);
}
100% {
transform: rotateY(360deg) translateY(-200px) rotateX(90deg);
}
}
@keyframes donghua6 {
0% {
transform: rotateY(0) translateY(200px) rotateX(-90deg);
}
100% {
transform: rotateY(360deg) translateY(200px) rotateX(-90deg);
}
}
</style>
</head>
<body>
<div class="warp">
<div class="box">⚀</div>
<div class="box">⚁</div>
<div class="box">⚂</div>
<div class="box">⚃</div>
<div class="box">⚄</div>
<div class="box">⚅</div>
<div class="warp1">
<div class="box">☯</div>
<div class="box">☯</div>
<div class="box">☯</div>
<div class="box">☯</div>
<div class="box">☯</div>
<div class="box">☯</div>
</div>
</div>
</body>
</html>
评论 (0)