CSS3中的3D動畫實現(鍾擺、魔方)--實現代碼


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: 255;
  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: 0;
    left: 0;
    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);
  }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM