CSS3新增特性 transfrom

2022-08-19 15:42:13 字數 952 閱讀 8224

2d轉換

translate(x_offset,y_offset) :相對於自身位置的乙個偏移,單位可以設定px,%-相對自身的長寬 -> translatex(),translatey()

.child
rotate(20deg) 給乙個順時針旋轉的度數,可為負 

scale(2, 3) 元素的放大縮小 ->scalex();scaley()

skew([,]) 水平和垂直方向的傾斜 ->skewx();skewy()

旋轉方式

matrix() 6個引數 通過矩陣的計算可以代表平移,縮放,旋轉,傾斜 

3d轉換

rotatex(angle) 定義沿x軸的3d旋轉  也可以這樣寫

translatex() 定義沿著x軸的移動

scalex(2)

設定父元素transform-style: preserve-3d;// 子元素將保留其 3d 位置。

css3新增特性

css3屬性選擇器 media all screen print speech only and not min width max width orientation portrait landscape e attr value id value class value e attr value...

CSS3新增特性詳解

css 用於控制網頁的樣式和布局。css3 是最新的 css 標準。css3 被劃分為模組。其中最重要的 css3 模組包括 background rgba 0,0,0,0.3 div 圓角矩形設定4個角。圓角矩形可以為4個角分別設定圓度,但是是有順序的。border top left radius...

CSS3新增特性詳解(二)

上篇博文主要介紹了css3新增特性中的靜態特性,比如新的選擇器 多背景圖 陰影 漸變等。本文主要介紹css3中新增的動態特性,如過度 動畫 變形等。transitian webkit transition all 0.5s linear 0.3s 過度效果,習慣上也叫做漸變。只不過這個漸變是指為動態...