码迷，mamicode.com
首页 > Web开发 > 详细

【CSS3】变换transform---小案例，行星运动效果

时间：2017-11-09 14:59:21      阅读：418      评论：0      收藏：0      [点我收藏+]

标签：定位   sed   open   webkit   变化   text   pos   data   idt   

transform变换

  • rotate旋转

rotate(angle) 2D旋转；rotateX(angle) 沿着x轴旋转；rotateY(angle) 沿着y轴旋转；rotate(angle) 沿着z轴旋转； 

deg角度、rad弧度、turn圈、grad梯度

90deg = 100grad = 0.25turn ≈  1.570796326794897rad

  • scale缩放

0<取值<1 缩小；取值>1 放大。

  • translate 位移

translate（0px,0px）;translateX() ;translateY() ;translateZ(); translate3d();

单位为px; 第一个值为x轴方向上移动，第二个值为y轴方向上移动；

  • skew 倾斜

单位为deg，第一个值为水平方向上倾斜，第二个值为垂直方向上倾斜；

  • transform-origin

默认变换的基点为中心点，可设置坐标值或关键词改变基点；

transform-origin: left top;

  • transform-style

使被转换的子元素保留其 3D 转换: preserve-3d;

子元素将不保留其3D转换：flat；

行星运动效果 

 

技术分享 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>H5动画-行星运动3D效果</title>
    <style>
        body,
        ul {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }
        .lin[data-v-3dcdcd53]{
            width: 400px;
            height: 400px;
            padding-top: 80px;
            margin: 100px auto;
            position: relative;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(75deg) rotateY(0deg) rotate(5deg);
            transform: translateX(0) translateY(0) translateZ(0) rotateX(75deg) rotateY(0deg) rotate(5deg);
            transition: all 1s;
        }
        
        .limg{
            width: 300px;
            height: 300px;
            text-align: center;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: translateX(15px) translateY(-50px) translateZ(-40px) rotateX(-75deg) rotateY(0deg) rotate(-1deg);
            transform: translateX(15px) translateY(-50px) translateZ(-40px) rotateX(-75deg) rotateY(0deg) rotate(-1deg);  
        }

        ul[data-v-3dcdcd53] {
            width: 450px;
            height: 450px;
            transform-style: preserve-3d;
            transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);
            animation: allCircle 25s linear infinite alternate;
        }

        @-webkit-keyframes allCircle {
            0% {
                -webkit-transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);
                transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);
            }
            to {
                -webkit-transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(-5deg) rotate(0deg);
                transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(-5deg) rotate(0deg);
            }
        }

        @keyframes allCircle {
            0% {
                -webkit-transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);
                transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(30deg) rotate(0deg);
            }
            to {
                -webkit-transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(-5deg) rotate(0deg);
                transform: translateX(-50px) translateY(-500px) translateZ(0) rotateX(0deg) rotateY(-5deg) rotate(0deg);
            }
        }

        li[data-v-3dcdcd53] {
            width: 450px;
            height: 450px;
            border: 2px solid #5ec0ff;
            border-radius: 50%;
            position: absolute;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        li span[data-v-3dcdcd53] {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            position: absolute;
        }

        li .sp1[data-v-3dcdcd53] {
            left: -14px;
            top: 211px;
        }

        li .sp2[data-v-3dcdcd53] {
            left: 311px;
            top: 16px;
        }

        li .sp3[data-v-3dcdcd53] {
            left: 311px;
            top: 406px;
        }

        .circle1[data-v-3dcdcd53] {
            -webkit-transform: rotateY(10deg);
            transform: rotateY(10deg);
            -webkit-animation: circle1 10s infinite linear;
            animation: circle1 10s infinite linear;
        }

        .circle1 span[data-v-3dcdcd53] {
            -webkit-transform: rotateX(-90deg) rotateY(-10deg);
            transform: rotateX(-90deg) rotateY(-10deg);
            -webkit-animation: circle1In 10s infinite linear;
            animation: circle1In 10s infinite linear;
        }

        .circle2[data-v-3dcdcd53] {
            -webkit-transform: rotateY(-35deg);
            transform: rotateY(-35deg);
            -webkit-animation: circle2 8s infinite linear;
            animation: circle2 8s infinite linear;
        }

        .circle2 span[data-v-3dcdcd53] {
            -webkit-transform: rotateX(-90deg) rotateY(35deg);
            transform: rotateX(-90deg) rotateY(35deg);
            -webkit-animation: circle2In 8s infinite linear;
            animation: circle2In 8s infinite linear;
        }

        @-webkit-keyframes circle1 {
            0% {
                -webkit-transform: rotateY(10deg) rotate(0deg);
                transform: rotateY(10deg) rotate(0deg);
            }
            30% {
                -webkit-transform: rotateY(10deg) rotate(180deg);
                transform: rotateY(10deg) rotate(180deg);
            }
            to {
                -webkit-transform: rotateY(10deg) rotate(1turn);
                transform: rotateY(10deg) rotate(1turn);
            }
        }

        @keyframes circle1 {
            0% {
                -webkit-transform: rotateY(10deg) rotate(0deg);
                transform: rotateY(10deg) rotate(0deg);
            }
            30% {
                -webkit-transform: rotateY(10deg) rotate(180deg);
                transform: rotateY(10deg) rotate(180deg);
            }
            to {
                -webkit-transform: rotateY(10deg) rotate(1turn);
                transform: rotateY(10deg) rotate(1turn);
            }
        }

        @-webkit-keyframes circle1In {
            0% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(-10deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(-10deg) rotate(0deg)
            }
            30% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(170deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(170deg) rotate(0deg)
            }
            to {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(355deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(355deg) rotate(0deg)
            }
        }

        @keyframes circle1In {
            0% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(-10deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(-10deg) rotate(0deg)
            }
            30% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(170deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(170deg) rotate(0deg)
            }
            to {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(355deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(355deg) rotate(0deg)
            }
        }

        @-webkit-keyframes circle2 {
            0% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(0deg)
            }
            70% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(180deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(180deg)
            }
            to {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(1turn);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(1turn)
            }
        }

        @keyframes circle2 {
            0% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(0deg)
            }
            70% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(180deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(180deg)
            }
            to {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(1turn);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(-35deg) rotate(1turn)
            }
        }

        @-webkit-keyframes circle2In {
            0% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(35deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(35deg) rotate(0deg)
            }
            70% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(215deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(215deg) rotate(0deg)
            }
            to {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(395deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(395deg) rotate(0deg)
            }
        }

        @keyframes circle2In {
            0% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(35deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(35deg) rotate(0deg)
            }
            70% {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(215deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(215deg) rotate(0deg)
            }
            to {
                -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(395deg) rotate(0deg);
                transform: translateX(0) translateY(0) translateZ(0) rotateX(-90deg) rotateY(395deg) rotate(0deg)
            }
        }
    </style>
</head>

<body>
    <div class="login">
        <div class="lin" data-v-3dcdcd53="">
            <div class="limg">
                <img src="images/demo1/1.png" alt="img">
            </div>
            <ul data-v-3dcdcd53="" class="allCircle">
                <li data-v-3dcdcd53="" class="circle1">
                    <span data-v-3dcdcd53="" class="sp1">
                        <img data-v-3dcdcd53="" src="images/icon/1.png" height="28" width="28" alt="">
                    </span>
                    <span data-v-3dcdcd53="" class="sp2">
                        <img data-v-3dcdcd53="" src="images/icon/2.png" height="28" width="28" alt="">
                    </span>
                    <span data-v-3dcdcd53="" class="sp3">
                        <img data-v-3dcdcd53="" src="images/icon/3.png" height="28" width="28" alt="">
                    </span>
                </li>
                <li data-v-3dcdcd53="" class="circle2">
                    <span data-v-3dcdcd53="" class="sp1">
                        <img data-v-3dcdcd53="" src="images/icon/4.png" height="28" width="28" alt="">
                    </span>
                    <span data-v-3dcdcd53="" class="sp2">
                        <img data-v-3dcdcd53="" src="images/icon/5.png" height="28" width="28" alt="">
                    </span>
                    <span data-v-3dcdcd53="" class="sp3">
                        <img data-v-3dcdcd53="" src="images/icon/6.png" height="28" width="28" alt="">
                    </span>
                </li>
            </ul>
        </div>
    </div>
</body>
<html>
View Code

 原理:  简单来说就是动画为一个ul整体，然后两个轨迹分别是里面的两个面，最后给他们添加不同的动画轨迹。

lin盒子为整个动画的最外层，包含中间的固定图片limg，以及动画ul。
整个lin盒子的位置为如下图：（使行星运动轨迹为3D立体的旋转效果,沿着x轴旋转75deg，沿着z轴旋转5deg）
技术分享

 

因为设置了-webkit-transform-style: preserve-3d;lin盒子中子元素同样有旋转效果。

故limg想要显示为正中间靠前就需要设置变换（相对于父级lin定位），效果如下图：

技术分享

 

而ul整体的面应为如下位置：

技术分享

 

ul中的行星运动轨迹即两个li位面，分别相对于ul整体位面来定位，两者的关系如图（红色的为ul位面）：
技术分享

 

最后再来看每个li圆圈中的小图标，同样将它四个小图标分别相对于li圆圈来定位就可以，定位效果如下：
技术分享

不过有个小问题，我们还需要将小图标旋转角度，因为li位面的角度问题，现在这样我们是看不到小图标的。

现在各个元素之间的位置关系已经设置好了，接下来就是添加动画效果了。
我们来分析一下：
  • 从整体看，lin和limg是固定不变的，有动画效果的就是ul中的元素。
  • ul整体是沿着Z轴左右变换角度的，就好像跷跷板。动画效果为循环的allCircle，变化的值为rotateY（注意相对的坐标系为lin位面的）；
  • 再看ul中的两个行星轨迹即两个li，他们就是在自己的位面上沿着中心轴旋转，就好像旋转的茶杯。动画效果为 circle1和circle2，变化的值为rotateZ；
  • 最后就是轨迹上的行星即小图标，他们相对于轨迹有自己的运行速度，就好像运动员跑步。动画效果为circle1In和circle2In，变化的值为rotateY；
 
至此，完成，代码在上面。

【CSS3】变换transform---小案例，行星运动效果

标签：定位   sed   open   webkit   变化   text   pos   data   idt   

原文地址：http://www.cnblogs.com/qiuyueding/p/7804559.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！