html照片魔方旋转,用HTML+CSS3写一个会旋转的魔方

Document

.box {

width: 300px;

height: 300px;

margin: 150px auto;

position: relative;

transform-style: preserve-3d;

animation: rotate 10s linear infinite alternate;

}

.before,

.back,

.top,

.bottom,

.left,

.right {

width: 300px;

height: 300px;

position: absolute;

}

.before {

transform: translateZ(150px);

}

.back {

/* transform: rotateY(180deg) translateZ(150px); */

transform: translateZ(-150px);

}

.top {

transform: rotateX(90deg) translateZ(150px);

}

.bottom {

transform: rotateX(-90deg) translateZ(150px);

}

.left {

transform: rotateY(-90deg) translateZ(150px);

}

.right {

transform: rotateY(90deg) translateZ(150px);

}

.before ul li {

background-color: green;

}

.back ul li {

background-color: red;

}

.top ul li {

background-color: pink;

}

.bottom ul li {

background-color: blue;

}

.left ul li {

background-color: yellow;

}

.right ul li {

background-color: wheat;

}

ul {

margin: 0;

padding: 0;

list-style: none;

}

li {

margin: 5px;

border-radius: 20px;

font-size: 50px;

width: 90px;

height: 90px;

float: left;

text-align: center;

line-height: 90px;

}

@keyframes rotate {

0% {

transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);

}

20%{

transform: rotateY(60deg) rotateX(60deg) rotateZ(60deg);

}

40% {

transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);

}

60%{

transform: rotateY(-60deg) rotateX(-60deg) rotateZ(-60deg);

}

80% {

transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);

}

100%{

transform: rotateY(60deg) rotateX(60deg) rotateZ(60deg);

}

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

来源：oschina

链接：https://my.oschina.net/u/4143235/blog/3160120