1、2d、3d轉換
通過除css3轉換，能夠對元素進行移動、縮放、轉位、拉長或伸縮等。轉換是使元素改變形狀、尺寸和位置的一種效果。可以使用2d、3d來轉換元素。
2d轉換方法：
translate()：移動
rotate()：旋轉
scale()：縮放
skew()：傾斜
3d轉換方法：
rotatex()
rotatey()
首先，建立html檔案index.html，以便於進行css的演示
初始效果
改變後效果
div下面將進行對div2進行動畫效果的設定
可以看到下面的盒子相對於原來分別向右向下移動了50px。最後四句是對於不同瀏覽器的適配進行的設定，注釋中有寫出對應的主流瀏覽器。
2.rotate（引數為旋轉度數）
可以看到下面的盒子旋轉了120度。
3.scale （引數為縮放倍數）
可以看到改變後的div2寬度不變，高度變為原來的二倍。
4.skew （引數是圍繞x軸旋轉的度數和圍繞y軸旋轉的度數）
3d的轉換效果
可以看到3d的轉換效果rotatex和rotatey分別從橫向和縱向實現了壓縮。
2、過渡效果
通過css3可以給元素新增一些效果，css3過渡是元素從一種樣式轉換成另一種樣式，主要包括動畫效果的css以及動畫執行的時間
屬性：transition：設定四個過渡屬性
transition-property：過渡的名稱
transition-duration：過渡效果花費的時間
transition-timing-function：過渡效果的時間曲線
transition-delay：過渡效果開始時間
建立乙個新的index.html
效果展示
div
div:hover
div:hover{}設定當滑鼠放置在元素上並過渡後的元素大小以及旋轉的度數。
圖中展示了元素在過渡過程中的乙個狀態，因為是動態效果不便於展示。
3、動畫效果
通過css3也可以進行建立動畫，css3的動畫需要遵循@keyframes規則。主要要規定動畫的時長和名稱。
html檔案body中同樣只有乙個div
對div樣式設定為：
div
@keyframes anim
25%50%
75%100%
}@-webkit-keyframes anim
25%50%
75%100%
}
css3新特性 過渡 動畫 2d 3d轉換
過渡 過渡三要素 1.必須要有屬性發生變化 如 width background等 2.必須要告訴系統哪個屬性需要執行過渡效果 transition property width,background 3.必須告訴系統過渡效果的持續時長 transition duration 5s,5s trans...
css動畫2D 3D的轉換
可以使用2d,3d來轉換元素 translate 使元素移動 有兩個引數，x和y，x表示水平方向的移動，y表示垂直方向的移動 例如 transfrom translate 100px,100px 例子 transfrom rotate 180deg deg 是乙個度數單位必須寫的 例子 transf...
CSS之2D 3D轉換總結
translate語法 x 就是 x 軸上水平移動 y 就是 y 軸上水平移動 transform translate x,y transform translatex n transfrom translatey n 演示 div rotate 旋轉 2d旋轉指的是讓元素在二維平面內順時針或者逆時...