CSS3实现的线框球形旋转效果
CSS3实现的线框球形旋转效果
【原理:】
其实原理十分简单,就是结合CSS3的变换属性transform与动画属性animate,这里主要注意的是
①class为y的类需要进行X轴旋转后才可以显现;
②给父级容器添加属性
transform-style: preserve-3d;
赋予子元素3D效果
<div class="ball"> <div class="ball_box"> <div class="x1"></div> <div class="x2"></div> <div class="x3"></div> <div class="x4"></div> <div class="x5"></div> <div class="x6"></div> <div class="x7"></div> <div class="x8"></div> <div class="x9"></div> <div class="y1"></div> <div class="y2"></div> <div class="y3"></div> <div class="y4"></div> <div class="y5"></div> <div class="y6"></div> <div class="y7"></div> <div class="y8"></div> <div class="y9"></div> </div> </div> <script src="http://cdn.gbtags.com/prefixfree/1.0.7/prefixfree.min.js"></script>
html, body {height:100%;} body {padding:0;margin:0;background:#333;position:relative;} .ball {height:500px;width:500px;position:absolute;top:50%;left:50%;margin:-250px 0 0 -250px;transition:all .6s;} .ball:hover {transform:scale(1.2);} .ball_box {width:100%;height:100%;animation:rotate3d 20s infinite linear;} .ball div {width:100%;height:100%;border-radius:100%;border:solid 1px #fff;position:absolute;top:50%;left:50%;margin:-50% 0 0 -50%;transform-style:preserve-3d;} .ball .x1 {transform:rotateY(0)} .ball .x2 {transform:rotateY(20deg)} .ball .x3 {transform:rotateY(40deg)} .ball .x4 {transform:rotateY(60deg)} .ball .x5 {transform:rotateY(80deg)} .ball .x6 {transform:rotateY(100deg)} .ball .x7 {transform:rotateY(120deg)} .ball .x8 {transform:rotateY(140deg)} .ball .x9 {transform:rotateY(160deg)} .ball .y1 {transform:rotateX(90deg) translateZ(200px) scale(0.60);} .ball .y2 {transform:rotateX(90deg) translateZ(150px) scale(0.80);} .ball .y3 {transform:rotateX(90deg) translateZ(100px) scale(0.92);} .ball .y4 {transform:rotateX(90deg) translateZ(50px) scale(0.98);} .ball .y5 {transform:rotateX(90deg) translateZ(0);} .ball .y6 {transform:rotateX(90deg) translateZ(-50px) scale(0.98);} .ball .y7 {transform:rotateX(90deg) translateZ(-100px) scale(0.92);} .ball .y8 {transform:rotateX(90deg) translateZ(-150px) scale(0.80);} .ball .y9 {transform:rotateX(90deg) translateZ(-200px) scale(0.60);} @keyframes rotate3d { 0% {transform:rotate(-20deg) rotateX(-20deg) rotateY(0)} 100% {transform:rotate(-20deg) rotateX(-20deg) rotateY(360deg)} }
放一个后来添加完色彩后的效果代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D旋转球</title> <style> .main { width: 500px; height: 500px; margin: 20px auto; border: 1px solid olivedrab; position: relative; transform-style: preserve-3d; -webkit-animation: change 20s infinite linear; } .ball { height: 500px; width: 500px; position: absolute; top: 50%; left: 50%; margin: -250px 0 0 -250px; /*transition: all 3s;*/ -webkit-animation: size 1s infinite linear; } @-webkit-keyframes size{ 0%{-webkit-transform: scale(1)} 25%{-webkit-transform: scale(1.3)} 50%{-webkit-transform: scale(1.3)} 100%{-webkit-transform: scale(1)} } .main div { position: absolute; height: 100%; width: 100%; border: 1px solid black; border-radius: 100%; } .x1 { background-color: aqua; -webkit-transform: rotateY(0deg) } .x2 { background-color: red; -webkit-transform: rotateY(30deg) } .x3 { background-color: antiquewhite; -webkit-transform: rotateY(60deg) } .x4 { background-color: #333333; -webkit-transform: rotateY(90deg) } .x5 { background-color: blanchedalmond; -webkit-transform: rotateY(120deg) } .x6 { background-color: yellow; -webkit-transform: rotateY(150deg) } .y1 { background-color: pink; -webkit-transform: rotateX(90deg) } .y2 { -webkit-transform: rotateX(90deg) translateZ(100px) } @-webkit-keyframes change { 0% { transform: rotateZ(-20deg) rotateX(-20deg) rotateY(0deg) } 100% { transform: rotateZ(-20deg) rotateX(-20deg) rotateY(360deg) } } </style> </head> <body> <div class="ball"> <div class="main"> <div class="x1"></div> <div class="x2"></div> <div class="x3"></div> <div class="x4"></div> <div class="x5"></div> <div class="x6"></div> <div class="y1"></div> <div class="y2"></div> </div> </div> </body> </html>
.
相关推荐
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
AlisaClass 2019-11-18
zengni 2019-10-27
懵懂听风雨 2015-11-12
沈宫新 2018-02-05
lanzhusiyu 2018-01-05
走向WEB开发 2017-09-18
走向WEB开发 2018-02-18
yaodilu 2019-06-30
qiupu 2019-06-29
sunshineboyleng 2020-07-08
impress 2020-05-11
yaodilu 2020-04-30