1、translate(x,y) 設定盒子位移
2、scale(x,y) 設定盒子縮放
3、rotate(deg) 設定盒子旋轉
4、skew(x-angle,y-angle) 設定盒子斜切
5、perspective 設定透視距離
6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示
7、translatex、translatey、translatez 設定三維移動
8、rotatex、rotatey、rotatez 設定三維旋轉
9、scalex、scaley、scalez 設定三維縮放
10、tranform-origin 設定變形的中心點
11、backface-visibility 設定盒子背面是否可見
做變形動畫需要設定初始值，不設定容易出現跳變的bug
案例1：設定盒子位移、縮放、旋轉、斜切
lang
="en"
>
>
charset
="utf-8"
>
>
transformtitle
>
type
="text/css"
>
.box
.box:hover
.box2
.box2:hover
.box3
.box3:hover
.box4
.box4:hover
style
>
head
>
>
class
="box"
>
div>
class
="box2"
>
div>
class
="box3"
>
div>
class
="box4"
>
div>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
type
="text/css"
>
.box01,.box02,.box03,.box04
.box02
.box03
.box04
.box01:hover,.box02:hover,.box03:hover,.box04:hover
style
>
head
>
>
class
="box01"
>
div>
class
="box02"
>
div>
class
="box03"
>
div>
class
="box04"
>
div>
body
>
html
>
alt="背景圖"
>
class
="back"
>
的說明文字
div>
div>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
>
三維旋轉title
>
type
="text/css"
>
/*
旋轉的軸向：
x軸：從左往右
y軸：從上往下
z軸：從螢幕內往外
判斷旋轉的方向：讓軸向對著自己，順時針方向
*/.box
.box:hover
.box2
.box2:hover
style
>
head
>
>
class
="box"
>
div>
class
="box2"
>
div>
body
>
html
>
筆記 CSS3transform屬性
transform屬性有斜拉 skew 縮放 scale 旋轉 rotate 位移 translate 斜拉skew 用法skew 10deg 或者skew 10deg,20deg 兩個引數表示傾斜角度 乙個引數時表示水平方向傾斜 兩個引數時，第乙個表示水平方向傾斜，第二個引數表示垂直方向傾斜 sk...
CSS3 transform變形功能
單個測試 原圖 單個測試 rotate 單個測試 原圖 單個測試 scale 總結 scalex scaley 可以這兩個這樣單獨的設定，就可以單獨設定是x軸縮放還是y軸縮放了，或者設定兩個值得時候，其中乙個設為0也可以這種效果 單個測試 原圖 單個測試 translate 總結 如果你全部寫完了，...
CSS3 transform的skew屬性值詳解
我剛剛接觸transform的skew屬性值時一頭霧水，根本不知道種東西到底是咋變的。上網查，各個 上也只說這個使用來做扭曲變換的，具體是咋變的就是不說。無奈我只好自己研究了，現把研究結果共享一下。首先說變換的時候座標系是咋建的，如下圖 transform origin 0px 0px 既然skew...