CSS3实现的科技球体旋转动画特效

1、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: translat

2、ez(-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);.s

3、ide-right -webkit-transform: translatex(5em) rotatey(90deg);transform: translatex(5em) rotatey(90deg);.side-top -webkit-transform: translatey(-5em) rotatex(90deg);transform: translatey(-5em) rotatex(90deg);.side-bottom -webkit-transform: translatey(5em) rotatex(-90deg);transform: translatey(5em) rot

4、atex(-90deg);.side-front -webkit-transform: translatez(5em);transform: translatez(5em);.side_inner position: absolute;left: 0;right: 0;bottom: 0;top: 0;width: 5em;height: 5em;margin: auto;border-radius: inherit;border: 1px solid;box-shadow: inset 0 0 2em;color: orangered;-webkit-transform: translate

5、z(2em);transform: translatez(2em);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;.side_inner:before, .side_inner:after content: ""display: block;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;box-sizing: border-box;border-radius: inherit;border

6、: 1px solid;box-shadow: inset 0 0 2em, 0 0 2em;.side_inner:before width: 2.5em;height: 2.5em;-webkit-transform: translatez(2em);transform: translatez(2em);color: crimson;.side_inner:after width: 1.5em;height: 1.5em;-webkit-transform: translatez(4em);transform: translatez(4em);color: purple;-webkit-k

7、eyframes rotate 100% -webkit-transform: rotatex(360deg) rotatey(720deg) rotatez(360deg);transform: rotatex(360deg) rotatey(720deg) rotatez(360deg);keyframes rotate 100% -webkit-transform: rotatex(360deg) rotatey(720deg) rotatez(360deg);transform: rotatex(360deg) rotatey(720deg) rotatez(360deg);html, body height: 100%;body display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack