css3 3d旋转字体模糊,css3制作3d旋转效果

* {

margin:0;

padding:0;

list-style:none

}

.box {

width:300px;

height:300px;

border:1px solid red;

margin:100px auto;

perspective:1200px;

}

ul {

width:200px;

height:200px;

border:1px solid red;

margin:50px 50px;

position:relative;

transform-style:preserve-3d;

animation:move 60s infinite linear;

transform-origin:center center 100px

}

li {

width:200px;

height:200px;

background:darkcyan;

position:absolute

}

li:nth-last-of-type(1) {

background:border-box;

}

li:nth-last-of-type(2) {

background:darkgoldenrod;

transform:translateX(200px) rotateY(-90deg);

transform-origin:left

}

li:nth-last-of-type(3) {

background:red;

transform:translateX(-200px) rotateY(90deg);

transform-origin:right

}

li:nth-last-of-type(4) {

background:orchid;

transform:translateY(200px) rotateX(90deg);

transform-origin:top

}

li:nth-last-of-type(5) {

background:grey;

transform:translateY(-200px) rotateX(-90deg);

transform-origin:bottom

}

li:nth-last-of-type(6) {

background:chartreuse;

transform:translateZ(200px);

opacity:0.7

}

@keyframes move {

from {

transform:rotateY(0deg)

}

to {

transform:rotateY(360deg)

}

}