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

作者:分分快三计划

行星运动成效 

 

分分快三计划 1分分快三计划 2

<!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">

                        <img data-v-3dcdcd53="" src="images/icon/1.png" height="28" width="28" alt="分分快三计划 3">


                        <img data-v-3dcdcd53="" src="images/icon/2.png" height="28" width="28" alt="分分快三计划 4">


                        <img data-v-3dcdcd53="" src="images/icon/3.png" height="28" width="28" alt="分分快三计划 5">

                </li>
                <li data-v-3dcdcd53="" class="circle2">

                        <img data-v-3dcdcd53="" src="images/icon/4.png" height="28" width="28" alt="分分快三计划 6">


                        <img data-v-3dcdcd53="" src="images/icon/5.png" height="28" width="28" alt="分分快三计划 7">


                        <img data-v-3dcdcd53="" src="images/icon/6.png" height="28" width="28" alt="分分快三计划 8">

                </li>
            </ul>
        </div>
    </div>
</body>
<html>

View Code

 原理:  轻易的话就是卡通片为一个ul全体,然后多个轨迹分别是个中的多个面,最终给他们加多不一致的卡通轨迹。

lin盒子为总体动漫的最外层,包含中间的定势图片limg,以致动画ul。

全部lin盒子的职位为如下图:(使行星运动轨迹为3D立体的旋转效果,沿着x轴旋转75deg,沿着z轴旋转5deg)

分分快三计划 9

 

因为安装了-webkit-transform-style: preserve-3d;lin盒子中子成分雷同有旋转效果。

故limg想要呈现为正中间靠前就要求设置转变(相对于父级lin定位),效能如下图

分分快三计划 10

 

而ul全体的面应该为如下地点

分分快三计划 11

 

ul中的行星运动轨迹即多少个li位面,分别针锋相投于ul全部位面来恒定,双方的涉及如图(金红的为ul位面、深灰为li位面卡塔尔:

分分快三计划 12

 

 

最终再来看各样li圆圈中的小Logo,相符将它多个小Logo分别针锋相投于li圆圈来定位就能够,从来作用如下

分分快三计划 13

不过有个小标题,大家还亟需将小Logo旋转角度,因为li位面包车型地铁角度难点,现在如此大家是看不到小Logo的。

明天各样要素之间的岗位关系已经设置好了,接下去就是增加动画成效了。

小编们来深入分析一下:

  • 从完整看,lin和limg是一定不改变的,有动漫效果的正是ul中的成分。
  • ul全部是沿着Z轴左右转移角度的,就如跷跷板。动漫效果为循环的allCircle,变化的值为rotateY(注意绝对的坐标系为lin位面的卡塔 尔(阿拉伯语:قطر‎;

分分快三计划 14

  • 再看ul中的五个行星轨道即多个li,他们正是在投机的位面上沿着大旨轴转动,就象是旋转的三足杯。动漫效果为 circle1和circle2,变化的值为rotateZ;

 分分快三计划 15

  • 最终正是轨道上的行星即小Logo,他们针锋相投于轨迹有投机的运作速度,就就像运动员跑步。动漫效果为circle1In和circle2In,变化的值为rotateY;

 

到现在,完毕,代码在地方。

最终依照上边的代码自身转变一下Logo和图片颜色等,就能够美观一点。举个例子:

分分快三计划 16 

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,第八个值为水平方向上偏斜,第4个值为垂直方向上倾斜;

  • transform-origin

暗中认可转换的基点为骨干点,可设置坐标值或主要词改造中央;

transform-origin: left top;

  • transform-style

使被改换的子成分保留其 3D 调换: preserve-3d;

子成分将不保留其3D转变:flat;

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划