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；
     
    至此，完成，代码在上面。
    最后根据上面的代码自己更换一下图标和图片颜色等，就可以好看一点。例如：

     
  • 相关阅读:
    JSR303实现数据校验案例
    maven安装和相关配置
    mybatis分页插件使用案例
    分页查询案例
    ssm整合相关配置
    配置文件没有按照maven约定存放解决方法
    git常用命令和基本使用
    mybatis配置二级缓存
    Angular第三方UI组件库------ionic
    Angular路由知识点
  • 原文地址：https://www.cnblogs.com/qiuyueding/p/7804559.html
Copyright © 2011-2022 走看看