码上快乐

相关内容   简体   繁体

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

本文转载自  查看原文  2017-11-09 10:46  1061    HTML/CSS/ css3

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

 


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 threejs行星运动小demo总结 css3加js做一个简单的3D行星运转效果 关于CSS3中transform变换的小坑 css3之transform 变换 行星运动轨迹的程序实现 CSS3总结七：变换（transform） 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理 JAVA图形小动画之简单行星运动 CSS3 -webkit-transform(元素变换) css3 transform旋转有3d效果
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM