Transform 轉場效果

專有名詞

• angle 角度
• rotate 旋轉
• matrix 矩陣

2D

• matrix
• translate
• scale
• rotate
• skew

Transform 屬性

• transform
• transform-origin

Transform Methods

• matrix(n,n,n,n,n,n): using a matrix of six values
• translate(x,y)
• translateX(n)
• translateY(n)
• scale(x,y)
• scaleX(n)
• scaleY(n)
• rotate(angle)
• skew(x-angle,y-angle)
• skewX(angle)
• skewY(angle)

範例

範例一

div {
    transform: rotateX(-70deg);
}

範例二

demo

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}

div:hover {
    width: 300px;
}

3D

rotate 旋轉

• rotateX
• rotateY
• rotateZ
• rotate3d(x,y,z,angle)

transform: rotate3d(1, 0, 0, 60deg);

matrix3d 矩陣

• • matrix 自由度最高

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Defines a 3D transformation, using a 4x4 matrix of 16 values

範例

demo

<div class="example">
    <div class="profile">
      <div class="profile-img">
        <img src="http://alincode.github.io/blog/assets/images/profile.jpg" width="200" height="200" />
        </div>
      <div class="profile-info">
        <h1>alincode</h1>
        <ul>
          <li>軟體技術顧問</li>
          <li>企業內訓講師</li>  
        </ul>
      </div>
    </div>
  </div>

.example {
  height:200px;
  overflow:hidden;
}

.profile {
    width: 200px;
    -moz-transition:margin-top .5s ease-out;
    -webkit-transition:margin-top .5s ease-out;
    -o-transition:margin-top .5s ease-out;
    -ms-transition:margin-top .5s ease-out;
}

.profile:hover {
  margin-top:-200px;
}

瀏覽器支援度

-webkit-, -moz-, or -o- specify the first version that worked with a prefix.

範例

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

延伸閱讀

• CSS3 3D Transforms - w3school
• CSS 3D 旋轉 rotate3d 與 translate3d - puritys.me
• CSS transform 能旋轉、傾斜、縮放變形 box - 網頁藝術思考
• CSS3 Animation Transform Rotate - Village Park Source (video)
• CSS3 3D Transforms - SnoOpy - Interactive Development (video)