CSS3中的3D动画实现(钟摆、魔方)--实现代码

时间：2021-01-24 21:14:26

CSS3中的3D动画实现(钟摆、魔方)

transition-property 过渡动画属性  all|[attr]

　　transition-duration 过渡时间

　　transition-delay 延迟时间

　　transition-timing-function 运动类型

    • ease：（逐渐变慢）默认值
    • linear：（匀速）
    • ease-in：(加速)
    • ease-out：（减速）
    • ease-in-out：（先加速后减速）
    • cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）

　　　　http://cubic-bezier.com/

CSS3的2D变形----传统的transform变形效果

transform ： translate、scale、rotate、skew…

translate：平移、scale：缩放、rotate：旋转、skew：倾斜

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>transform</title>

    <link rel="stylesheet" href="reset.css">

    <style>

        .box{

            margin: 20px auto;

            width: 200px;

            height: 200px;

            background: url("img/zf_cube1.png") no-repeat;

            background-size: 100% 100%;

            transform: translateX(100px) translateY(200px) rotate(45deg) scale(1.5);

            /*

                rotate(30deg):默认就是沿着垂直于屏幕方向的轴旋转的

                rotateX：沿着X轴旋转

                rotateY：沿着Y轴旋转

            */

        }

    </style>

</head>

<body>

<div class="box"></div>

</body>

</html>

CSS3的2D变形----实现钟摆效果(animation帧动画

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>clock</title>

    <link rel="stylesheet" href="reset.css">

    <style>

        .clockBox{

            position: absolute;

            top:50%;

            left:50%;

            margin:-150px 0 0 -60px;

            width: 120px;

            height: 300px;

            background: url("img/clock.png") no-repeat;

            background-size: 100% 100%;

        }

        .clockBox{

            transform-origin: center top 0;

            transform: rotate(-45deg);

            animation:clockMove 1s linear infinite both;

            /*

             * animation-name：运动轨迹的名称（@keyframes设置运动轨迹）

             * animation-duration：完成动画需要的总时间

             * animation-timing-function：运动方式，默认值ease非匀速，linear匀速，ease-in加速，ease-out减速...

             * animation-delay：延迟时间，默认时0s代表立即执行

             * animation-iteration-count：动画执行的次数，默认是1代表执行一次就结束了，infinite是无限次运动

             * animation-fill-mode：设置动画的状态

             *      none默认值：无任何特殊状态设置

             *      forwards：动画完成后会停留在最后一帧的位置，（默认动画执行完成会回退到起始位置）

             *      backwards：只有在动画有延迟时间的时候才有用，当动画在延迟时间内，让运动的元素在运动轨迹的第一帧位置等待

             *      both：同时具备以上两个效果

            */

        }

        @keyframes clockMove {

            from,to{

                transform: rotate(45deg);

            }

            50%{

                transform: rotate(-45deg);

            }

        }

    </style>

</head>

<body>

<div class="clockBox"></div>

</body>

</html>

CSS3的3D变形----实现3D变形效果的步骤和原理

perspective：定义3D元素距视图的距离

　　none默认值，与设置零相同，不设置透视

　　number 设置的具体指（单位px）

认知3D空间轴和3D变形效果

　　translate（X|Y|Z）  rotate（X|Y|Z）......

transform-style:preserve-3d在3D空间中呈现被嵌套的元素

transform-origin：设置旋转的几点位置

　　X轴：left center right length %

　　Y轴：top center bottom length %

　　Z轴：length

CSS3的3D变形----搭建3D魔方让其自动360度旋转

cube.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet/less" href="css/cube.less">

    <script src="js/less.min.js"></script>

</head>

<body>

<div class="main">

    <ul class="cubeBox">

        <li><img src="img/zf_cube1.png" alt=""></li>

        <li><img src="img/zf_cube2.png" alt=""></li>

        <li><img src="img/zf_cube3.png" alt=""></li>

        <li><img src="img/zf_cube4.png" alt=""></li>

        <li><img src="img/zf_cube5.png" alt=""></li>

        <li><img src="img/zf_cube6.png" alt=""></li>

    </ul>

</div>

</body>

</html>

cube.less

@import "reset.css";

html, body {

  height: 100%;

  overflow: hidden;

}

.main {

  position: absolute;

  top: 50%;

  left: 50%;

  margin: -284px 0 0 -160px;

  width: 320px;

  height: 568px;

  background: url("../img/zf_cubeBg.jpg") no-repeat;

  background-size: cover; /*以背景图最适合的比例铺满整个屏幕：以后项目中凡是大容器或者整个页面的背景图大小最好都这样设置*/

}

.cubeBox {

  @v:;

  position: absolute;

  top: 50%;

  left: 50%;

  margin: -(unit(255/2,px)) 0 0 -(unit(255/2,px));

  width: 255px;

  height: 255px;

  li {

    position: absolute;

    top:;

    left:;

    width: 100%;

    height: 100%;

    img {

      display: block;

      width: 100%;

      height: 100%;

    }

  }

}

/*--实现魔方--*/

@v-1: unit(255/2, px);

@v-2: unit(-255/2, px);

.main {

  perspective: 2000px;

  .cubeBox {

    transform-style: preserve-3d;

    //=为了可以看见效果，给魔方一个初始的旋转角度

    transform: scale(0.6) rotateX(-30deg) rotateY(45deg);

    //=>自动360deg旋转

    animation:cubeMove 5s linear infinite both;

    li {

      //=>正反面

      &:nth-child(1) {

        transform: translateZ(@v-1);

      }

      &:nth-child(2) {

        transform: translateZ(@v-2) rotateY(180deg);

      }

      //=>左右面

      &:nth-child(3) {

        transform: translateX(@v-2) rotateY(-90deg);

      }

      &:nth-child(4) {

        transform: translateX(@v-1) rotateY(90deg);

      }

      //=>上下面

      &:nth-child(5) {

        transform: translateY(@v-2) rotateX(90deg);

      }

      &:nth-child(6) {

        transform: translateY(@v-1) rotateX(-90deg);

      }

    }

  }

}

@keyframes cubeMove {

  0%{

    transform: translate(50px) scale(0.6) rotateY(30deg);

  }

  25%{

    transform: translate(100px) scale(0.6) rotateY(270deg);

  }

  50%{

    transform: translate(-50px) scale(0.6) rotateY(0deg);

  }

  75%{

    transform: translate(100px) scale(0.6) rotateX(180deg);

  }

  100%{

    transform: translate(50px) scale(0.6) rotateZ(120deg);

  }

}

相关文章