css3橙色球形_CSS3实现的科技球体旋转动画特效

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

box-sizing: border-box;

border-radius: inherit;

border: 1px solid;

box-shadow: inset 0 0 2em, 0 0 2em;

}

.side::before {

width: 2.5em;

height: 2.5em;

color: gold;

}

.side::after {

width: 1.5em;

height: 1.5em;

-webkit-transform: translateZ(-2em);

transform: translateZ(-2em);

box-shadow: inset 0 0 1em, 0 0 1em;

color: teal;

}

.side--back {

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

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

}

.side--left {

-webkit-transform: translateX(-5em) rotateY(-90deg);

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

}

.side--right {