html会变色的正方形,纯css样式的立体正方形特效

Document

#box{

width:500px;

height: 500px;

margin:0 auto;

position: relative;

transform-style: preserve-3d;

animation-name: r;

animation-duration: 5s;

animation-timing-function: linear;

animation-iteration-count: infinite;

}

#box div{

width: 200px;

height: 200px;

position: absolute;

line-height: 200px;

text-align: center;

font-weight: bold;

font-size: 100px;

top:250px;

left:200px;

opacity: 0.8;

}

#a{

background: red;

transform-origin:right;

transform:rotateY(270deg) rotateX(180deg);

}

#b{

background: blue;

opacity: 0.8;

}

#c{

background: yellow;

transform-origin:left;

transform:rotateY(90deg) rotateX(180deg);

}

#d{

background: green;

transform-origin:top;

transform:rotateX(-90deg);

}

#e{

background: purple;

transform-origin:bottom;

transform:rotateX(-270deg) rotateY(180deg);

}

#f{

background: orange;

transform:translateZ(-200px);

}

@keyframes r{

0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }

100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) }

}

6

2

3

4

1

5