css空心图形,CSS3 空心立方体动画

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html,

body {

background: #000;

height: 100%;

width: 100%;

overflow: hidden;

}

.wrapper {

width: 200px;

height: 200px;

position: relative;

-webkit-perspective: 1000px;

perspective: 1000px;

left: 50%;

top: 50%;

-webkit-transform: translateY(-50%) translateX(-50%);

transform: translateY(-50%) translateX(-50%);

}

.cube {

width: 200px;

height: 200px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

position: absolute;

-webkit-animation: rotation 2s infinite;

animation: rotation 2s infinite;

}

.cube div {

margin: 0;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

display: block;

position: absolute;

border: 65px dotted #000;

border-image: -webkit-radial-gradient(#fff, #2c3e50);

border-image: -linear-radial(#fff, #2c3e50);

background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/807677/Spiral.jpg") no-repeat;

background-size: contain;

}

#side1 {

-webkit-transform: rotateX(90deg) translateZ(100px);

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

}

#side2 {

-webkit-transform: rotateX(-90deg) translateZ(100px);

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

}

#side3 {

-webkit-transform: rotateY(0deg) translateZ(100px);

transform: rotateY(0deg) translateZ(100px);

}

#side4 {

-webkit-transform: rotateX(180deg) translateZ(100px);

transform: rotateX(180deg) translateZ(100px);

}

#side5 {

-webkit-transform: rotateY(-90deg) translateZ(100px);

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

}

@-webkit-keyframes rotation {

0% {

-webkit-transform: rotateX(0) rotateY(0);

transform: rotateX(0) rotateY(0);

}

100% {

-webkit-transform: rotateX(-90deg) rotateY(90deg);

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

}

}

#side6 {

-webkit-transform: rotateY(90deg) translateZ(100px);

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

}

@keyframes rotation {

0% {

-webkit-transform: rotateX(0) rotateY(0);

transform: rotateX(0) rotateY(0);

}

100% {

-webkit-transform: rotateX(-90deg) rotateY(90deg);

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

}

}