zoukankan      html  css  js  c++  java
  • 【CSS3】变换transform---小案例,行星运动效果

    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圆圈来定位就可以,定位效果如下

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

    现在各个元素之间的位置关系已经设置好了,接下来就是添加动画效果了。
    我们来分析一下:
    • 从整体看,lin和limg是固定不变的,有动画效果的就是ul中的元素。
    • ul整体是沿着Z轴左右变换角度的,就好像跷跷板。动画效果为循环的allCircle,变化的值为rotateY(注意相对的坐标系为lin位面的);

    • 再看ul中的两个行星轨迹即两个li,他们就是在自己的位面上沿着中心轴旋转,就好像旋转的茶杯。动画效果为 circle1和circle2,变化的值为rotateZ;

     

    • 最后就是轨迹上的行星即小图标,他们相对于轨迹有自己的运行速度,就好像运动员跑步。动画效果为circle1In和circle2In,变化的值为rotateY;
     
    至此,完成,代码在上面。
    最后根据上面的代码自己更换一下图标和图片颜色等,就可以好看一点。例如:

     

  • 相关阅读:
    Oracle存储过程
    eclipse使用小技巧
    A.N.T的使用
    Java中JDBC连接数据库(MySQL)
    SQL常用语句例子
    c/s&&b/s区别浅析
    ngRoute+ngAnimate与JQM中的页面跳转的区别
    jQueryMobile与AngularJS的区别
    jQueryMobile--栅格布局
    jQueryMobile--基础
  • 原文地址:https://www.cnblogs.com/qiuyueding/p/7804559.html
Copyright © 2011-2022 走看看