CSS3 3D變形效果

CSS3 3D變形效果

---

CSS3 transform3D變形

transform的含義是：改變，使…變形；轉換

---

---

三維變換使用基於二維變換的相同屬性，如果您熟悉二維變換，你們發現3D變形的功能和2D變換的功能相當類似。CSS3中的3D變換主要包括以下幾種功能函數：

• 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數；
• 3D旋轉：CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數；
• 3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數；

---

transform:translate()：

含義：變動，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改個值就行，向左向下位移則為負“-”。

HTML代碼如下：

<div class="demo_transform1"></div>

css代碼如下：

.demo_transform1{ width:300px; height:200px; background:#00f; margin:50px auto; -webkit-transform:translate(120px,0); -moz-transform:translate(120px,0px)； } 

---

transform:rotate()：

含義：旋轉；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

HTML代碼如下：

<div class="demo_transform2"></div>

css代碼如下：

.demo_transform2{ width:300px; height:200px; background:#00f; margin:50px auto; -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); } 

---

transform:scale()：

含義：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，須寫成“2.0”，縮小則為負“-”。

HTML代碼如下：

<div class="demo_transform3"></div>

css代碼如下：

.demo_transform3{ width:300px; height:200px; background:#00f; margin:50px auto; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); } 

---

transform:skew()：

含義：傾斜；

HTML代碼如下：

<div class="demo_transform4"></div>

css代碼如下：

.demo_transform4{ width:300px; height:200px; background:#00f; margin:50px auto; -webkit-transform:skew(20deg); -moz-transform:skew(20deg); } 

---

transform綜合：

transform的常用屬性就是這些了，下面我們借助transition的幫忙來演示一個關於css3 transform的綜合實例（一個搖篩子3D效果）：

---

效果圖如下：

---

---

HTML代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/1230.css">
  </head>
  <body>
    <div class="box">
      <div class="zhuan">
         <div class="bian yi"></div> <!--第一個面 -->
        <div class="bian er"></div>  <!--第二個面-->
        <div class="bian san"></div>  <!--第三個面-->
        <div class="bian si"></div>  <!--第四個面-->
        <div class="bian wu"></div>  <!--第五個面-->
        <div class="bian liu"></div> <!--第六個面-->
      </div>
    </div>
  </body>
</html>

css代碼如下：

body{ background:#864521; } /*視距800px*/ .box{ perspective:800px; transform-style: preserve-3d; margin-top:100px; } .zhuan{ width:200px; height:200px; margin:0 auto; position: relative; transform-style: preserve-3d; /*設置時間為5秒*/ transition:5s; } /*鼠標移上之后開始旋轉*/ .zhuan:hover{ transform:rotateY(3600deg) rotateX(1800deg); } .zhuan .bian{ width:200px; height:200px; position: absolute; } /*設置圖片1,延Y軸旋轉90度，延Z軸移100px*/ .yi{ transform:rotateY(90deg) translateZ(100px); background:url(../img/1.png) no-repeat; background-size:100%100%; } /*設置圖片2,延Y軸旋轉90度，延Z軸移-100px*/ .er{ transform:rotateY(90deg) translateZ(-100px) rotateY(180deg); background:url(../img/2.png) no-repeat; background-size:100%100%; } /*設置圖片3,延X軸旋轉90度，延Z軸移100px*/ .san{ transform:rotateX(90deg) translateZ(100px); background:url(../img/3.png) no-repeat; background-size:100%100%; } /*設置圖片4,延X軸旋轉90度，延Z軸移-100px*/ .si{ transform:rotateX(90deg) translateZ(-100px) rotateX(180deg); background:url(../img/4.png) no-repeat; background-size:100%100%; } /*設置圖片5,延Z軸移100px*/ .wu{ transform:translateZ(100px); background:url(../img/5.png) no-repeat; background-size:100%100%; } /*設置圖片6,延Y軸旋轉180度，延Z軸移-100px*/ .liu{ transform:translateZ(-100px) rotateY(180deg); background:url(../img/6.png) no-repeat; background-size:100%100%; } 

　 ！！！注意：拷貝源碼，一定要引用對css路徑，設置對圖片路徑，方能實現效果！

---

---

今天主要向大家介紹了3D空間的3D旋轉、3D位移、3D縮放功能以及應用場景。讓大家對3D　Transform有一個初步的了解，並能根據這些基礎知識制作出自己需要的效果。

作者：大鵬哥