【CSS3】變換transform---小案例，行星運動效果

時間  2019-11-30
標籤 CSS3 變換 transform 案例 行星 運動 效果 欄目 CSS 简体版
原文   原文鏈接

transform變換

  • rotate旋轉

rotate(angle) 2D旋轉；rotateX(angle) 沿着x軸旋轉；rotateY(angle) 沿着y軸旋轉；rotate(angle) 沿着z軸旋轉； html

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

90deg = 100grad = 0.25turn ≈  1.570796326794897radide

  • scale縮放

0<取值<1 縮小；取值>1 放大。動畫

  • translate 位移

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

單位爲px; 第一個值爲x軸方向上移動，第二個值爲y軸方向上移動；3d

  • skew 傾斜

單位爲deg，第一個值爲水平方向上傾斜，第二個值爲垂直方向上傾斜；code

  • transform-origin

默認變換的基點爲中心點，可設置座標值或關鍵詞改變基點；orm

transform-origin: left top;htm

  • transform-style

使被轉換的子元素保留其 3D 轉換: preserve-3d;blog

子元素將不保留其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；
 
至此，完成，代碼在上面。
最後根據上面的代碼本身更換一下圖標和圖片顏色等，就能夠好看一點。例如：

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程