CSS3实现的线框球形旋转效果

2018-02-27 11:06:57来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

CSS3实现的线框球形旋转效果

【原理:】

    其实原理十分简单,就是结合CSS3的变换属性transform与动画属性animate,这里主要注意的是

①class为y的类需要进行X轴旋转后才可以显现;

②给父级容器添加属性

transform-style: preserve-3d;

赋予子元素3D效果 

 

<div >  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>        <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></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 >    <div >        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>    </div></div></body></html>
 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台