css3图像立体显示,CSS3 立体展示/不是正方形的图形

CSS

语言：

CSSSCSS

确定

@keyframes spin {

0%, 50% {

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

}

65%,

70% {

transform: rotateX(-25deg) rotateY(40deg) rotateZ(0deg);

}

80% {

transform: rotateX(-50deg) rotateY(20deg) rotateZ(0deg);

}

90% {

transform: rotateX(-25deg) rotateY(40deg) rotateZ(0deg);

}

100% {

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

}

}

@keyframes fade {

0% {

border-color: #fefefe;

}

50% {

border-color: #fefefe;

}

51%,

97% {

border-color: transparent;

}

100% {

border-color: #fefefe;

}

}

body {

background: #333;

perspective: 0;

}

.stage {

position: absolute;

margin: auto;

top: 0;

right: 0;

bottom: 0;

left: 0;

animation: spin 10s infinite;

transform-style: preserve-3d;

width: 20em;

height: 20em;

}

.stage div {

position: absolute;

width: 100%;

height: 100%;

}

.stage__back {

transform: translateZ(-10em) rotateY(180deg);

background: #888;

}

.stage__right {

transform: rotateY(-270deg) translateX(10em);

transform-origin: top right;

background: #666;

}

.stage__bottom {

transform: rotateX(90deg) translateY(10em);

transform-origin: bottom center;

background: #444;

}

.cube {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 10em;

height: 10em;

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

transform-style: preserve-3d;

animation: spin 10s infinite;

}

.cube div {

position: absolute;

width: 10em;

height: 10em;

}

.right:before,

.left:before,

.top:before,

.bottom:before {

content: '';

display: block;

height: 100%;

border-top-left-radius: 0;

border-top-right-radius: 100% 50%;

border-bottom-left-radius: 0;

border-bottom-right-radius: 100% 50%;

border: 2px solid #fefefe;

border-left: 0;

}

.back {

transform: translateZ(-5em) rotateY(180deg);

}

.right {

transform: rotateY(-270deg) translateX(5em);

transform-origin: top right;

}

.left {

transform: rotateY(270deg) translateX(-5em);

transform-origin: center left;

}

.left:before {

transform: rotate(180deg);

}

.top {

transform: rotateX(-90deg) translateY(-5em);

transform-origin: top center;

}

.top:before {

transform: rotate(90deg);

}

.bottom {

transform: rotateX(90deg) translateY(5em);

transform-origin: bottom center;

}

.bottom:before {

transform: rotate(270deg);

}

.front {

transform: translateZ(5em);

border: 1px solid #fefefe;

animation: fade 10s infinite;

}