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

走向WEB开发

2018-02-18

关注关注

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>

transform css3动画 css3旋转旋转变换 css