2. 程式人生 > >CSS3 transform屬性

CSS3 transform屬性

阿新 • • 發佈：2018-01-02
spec 報錯 left width 四邊形 tran dex 方向 變形

在介紹有關transform相關的知識之前，先來講一下transform-origin的用法以及關於<angle>角度的幾種取值單位。另外，在使用時，為了兼容各個瀏覽器，可加上瀏覽器的私有前綴［－moz- -webkit -ms-］。

transform-origin

設置對象變換的原點，通常和rotate旋轉、scale縮放、skew斜切等一起使用，IE9+

2D情況下：默認值 50% 50%，即center center

3D情況下：默認值 50% 50% 0

取值介紹：

  1. X軸：left｜center｜right｜length｜%
  2. Y軸：top｜center｜bottom｜length｜%
  3. Z軸：length

註意：如果只設置一個值，則該值作用於橫坐標，縱坐標默認50%，Z軸默認為0，另外百分比是相對於自身進行計算的。

如：

{
  transform: rotate(45deg);
  transform-origin: 0 0;
  -ms-transform: rotate(45deg);     /* IE 9 */
  -ms-transform-origin: 0 0;          
  -moz-transform: rotate(45deg);    /* Firefox */
  -moz-transform-origin: 0 0; 
  -webkit-transform
 
: rotate(45deg); /* Safari Opera and Chrome */ 
  -webkit-transform-origin: 0 0;
}

效果圖：

技術分享圖片

角度的單位

CSS3新增，角度單位有四種，在所有可使用角度的地方均可使用這四種單位，但是需要註意兼容性，除turn單位外其他單位均可兼容IE9+瀏覽器版本。

單位說明：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

單位說明
deg度數，一個圓共360度，IE9+
grad梯度，一個圓共400梯度，IE9+
rad弧度，一個圓共2n弧度，IE9+
turn轉、圈，一個圓共1轉，IE＋ FireFox13.0+

transform

變換，可對元素進行位移、旋轉、縮放、傾斜操作，支持2D或者3D轉換，IE9+支持。

目錄

  • translate 位移
  • rotate 旋轉
  • scale 縮放
  • skew 斜切
  • 變換綜合應用

translate 位移

對象進行2D空間或3D空間的位移。 使用規則：

translate(): 第一個參數指定X軸的位移量[必須], 第二個參數指定Y軸的位移量[當不設置時, 默認為0];
translateX(): 指定X軸的位移;
translateY(): 指定Y軸的位移;
translate3D(): 第一個參數指定X軸的位移量, 第二個參數指定Y軸的位移量, 第三個參數指定Z軸的位移量, 3個參數缺一不可;
translateZ(): 指定Z軸的位移;

使用translate時需要註意位移量的百分比是相對元素自身寬高來計算的。

translate有一個最常見的應用，即當元素寬度高度不固定時，使用translate可實現水平以及垂直方向的居中。

代碼示例：

    dom結構
 <div class="box">
        <div class="item">center</div>
    </div>


    樣式設計
 .box{
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid;
    }
    .item{
        position: absolute;
        padding: 50px;
        background-color: #fb3;
        top: 50%; /*相對於父級*/
        left: 50%;

        transform: translate(-50%, -50%); /*相對自身*/

        -ms-transform: translate(-50%, -50%); 
        -moz-transform: translate(-50%, -50%); 
        -webkit-transform: translate(-50%, -50%); 
    }

效果圖：

技術分享圖片

rotate 旋轉

對象進行2D空間或3D空間旋轉。常與 transform-origin 一起使用。

使用規則：

rotate(): 2D旋轉，根據指定的旋轉角度進行旋轉;
rotate3D(): 3D旋轉，必須指定四個參數，前3個參數分別表示旋轉的方向x y z, 第4個參數表示旋轉的角度;
rotateX(): 指定X軸的旋轉角度;
rotateY(): 指定Y軸的旋轉角度;
rotateZ(): 指定Z軸的旋轉角度;

使用rotate時需要註意以下幾點：

  1. 旋轉角度必須有單位，否則將報錯。
  2. rotate值為正值時，順時針旋轉；否則逆時針旋轉。
  3. 在2D情況下，rotate()只能指定一個參數；在3D情況下，rotate3D()必須指定四個參數，否則將報錯。

旋轉45度，代碼示例：

 /* X軸旋轉45度 */
    .item1{
        transform: rotateX(-45deg);

        -moz-transform: rotateX(-45deg);
        -ms-transform: rotateX(-45deg);
        -webkit-transform: rotateX(-45deg);
    }

    /* Y軸旋轉45度 */
    .item2{
        transform: rotateY(-45deg);

        -moz-transform: rotateY(-45deg);
        -ms-transform: rotateY(-45deg);
        -webkit-transform: rotateY(-45deg);
    }

    /* Z軸旋轉45度 */    
    .item3{
        transform: rotateZ(-45deg);

        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        -webkit-transform: rotateZ(-45deg);
    }

示例圖：

技術分享圖片技術分享圖片技術分享圖片

上述例子中的 rotateZ(-45deg);也可以寫成 rotate3D(0,0,1,-45deg);，當然相對於X軸、Y軸的也可使用rotate3d的簡寫形式。

另外，不難看出只指定Z軸的旋轉與2D旋轉的效果一致。即以下三種寫法得到的旋轉效果是一樣的：

transform: rotate(-45deg);

transform: rotate3D(0,0,1,-45deg);

transform: rotateZ(-45deg);

scale 縮放

對象進行2D空間或3D空間縮放。常與 transform-origin 一起使用。

使用規則：

scale(): 第一個參數指定X軸的縮放倍數[必須], 第二個參數指定Y軸的縮放倍數[當不設置時, 默認取第一個參數的值];;
scaleX(): 指定X軸的縮放倍數;
scaleY(): 指定Y軸的縮放倍數;
scale3D(): 第一個參數指定X軸的縮放倍數, 第二個參數指定Y軸的縮放倍數, 第三個參數指定Z軸的縮放倍數, 3個參數缺一不可;
scaleZ(): 指定Z軸的縮放倍數;

使用scale時需要註意以下幾點：

  1. 參數值為倍數，如：scale(2); 表示放大2倍。
  2. 參數值是分別相對元素的寬和高進行計算的。即便是scale只設置了一個值，那也是分別計算的。
  3. 參數值大於1表示放大；0～1之間為縮小；1表示不便；0的時候元素不可見。
  4. 參數值為負數時，除了元素的方向發生改變[x軸反轉]，其他規律與正值一致。

負值的情況，代碼示例：

    dom結構
 <div class="box">
        <div class="item">Item</div>
    </div>



    樣式設計
 .box{
        width: 300px;
        height: 300px;
        border: 1px solid;
    }
    .item{
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #fb3;

        transform: scale(-1.2);

        -ms-transform: scale(-1.2);
        -moz-transform: scale(-1.2);
        -webkit-transform: scale(-1.2);
    }

效果圖：

技術分享圖片

圖中可看出，元素相對於x軸發生了反轉，但是縮放效果並沒有受影響。

skew 斜切

對象進行2D空間斜切。常與 transform-origin 一起使用。

使用規則：

skew(): 第一個參數對應X軸[必須], 第二個參數對應Y軸[當不設置時, 默認為0];;
skewX(): 指定X軸的斜切;
skewY(): 指定Y軸的斜切;

綜合應用

  • 平行四邊形
  • 梯形
  • 菱形
  • 折角

平行四邊形

原理：使用skew斜切來實現。

先看效果圖：

技術分享圖片

看到效果圖，最先想到的是對元素使用skew斜切效果。

簡單使用斜切代碼：

    dom結構：
<div class="btn">Home</div>



    樣式設計：
.btn{
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #fb3;

        transform: skew(-45deg);

        -moz-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        -webkit-transform: skew(-45deg);
    }

確實實現了平行四邊形的效果，但是裏面的內容也被斜切了，並不完美。

技術分享圖片

下面介紹兩種方向來實現平行四邊形，且內容不會受影響。

第一種是比較常見的，嵌套一層結構，父元素進行斜切，子元素抵消掉斜切。

代碼：

    dom結構：
  <div class=".box">
        <div class="btn">home</div> 
    </div>



    樣式設計：
.box{
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #fb3;

        transform: skew(-45deg);

        -moz-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        -webkit-transform: skew(-45deg);
    }
    .btn{
        transform: skew(45deg);

        -moz-transform: skew(45deg);
        -ms-transform: skew(45deg);
        -webkit-transform: skew(45deg); 
    }

第二種方法是使用偽元素，將斜切背景應用在偽元素上。

代碼：

    dom結構：
<div class="btn">home</div> 



    樣式設計：
 .btn{
        position: relative;
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }
    .btn:after{
        position:absolute;
        content: ‘‘;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #fb3;

        z-index: -1; /* 保證背景不會覆蓋住文字 */

        transform: skew(-45deg);

        -moz-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        -webkit-transform: skew(-45deg); 
    }

梯形

梯形的實現相對平行四邊形來說要復雜一些，需要借助perspective()透視來實現。

先看效果圖：

技術分享圖片

代碼：

    dom結構：
<div class="box">home</div>



    基本樣式
.box {
        position: relative;
        width: 200px;
        height: 60px;
        margin: 50px;
        line-height: 60px;
        text-align: center;
    }

下面來說明一下如何實現梯形效果：

和平行四邊形的原理一樣，梯形的背景仍要寫在偽元素上，以防止字體變形。

代碼如下：

 .box:after {
        position: absolute;
        content: ‘‘;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-color: #fb3;
        transform: perspective(20px) rotatex(5deg);

        -moz-transform: perspective(20px) rotatex(5deg);
        -ms-transform: perspective(20px) rotatex(5deg);
        -webkit-transform: perspective(20px) rotatex(5deg);
    }

為更好的查看效果，可以給box加上半透明的背景，效果圖：

技術分享圖片

旋轉是以元素的中心線進行旋轉的，所以要修改一下旋轉原點，增加以下代碼：

 transform-origin: bottom;
    －moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom;

在看效果圖：

技術分享圖片

這時可以發現，元素的高度已經嚴重縮水了，這時候可以使用scale進行y軸的縮放，修改transform代碼如下：

    transform: perspective(20px) rotatex(5deg) scaley(1.3);
    －moz-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3);
    -ms-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3);
    -webkit-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3);

效果：

技術分享圖片

當然也可以利用修改transform-origin的值實現不同的梯形。

技術分享圖片

代碼如下[別忘記兼容性，加上瀏覽器前綴]：

    右側直角
    transform-origin: right;
    transform: perspective(20px) rotatex(5deg);

    左側直角
    transform-origin: left;
    transform: perspective(20px) rotatex(5deg);

菱形

菱形的實現有兩種，第一種是有rotate結合scale實現，第二種是用clip-path實現。

首先對父級進行旋轉 代碼：

    dom結構
    <div class="box">
        <img src="">
    </div>

    基本樣式設計：
 .box{
        width: 200px;
        height: 200px;
        border: 1px solid;
        overflow: hidden;

        transform: rotate(45deg);
        -mos-transform: rotate(45deg);
        -mz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    .box img{
        width: 100%;
    }

效果圖：

技術分享圖片

現在可以加上scale屬性了，更改transform屬性為：

    transform: rotate(-45deg) scale(1.41);

技術分享圖片

但是這個方法有限制，每次必須要計算scale放大的比例，並且當圖片不是正方形時，就沒辦法實現較好的菱形效果。

第二種方案，使用clip-path實現。不需要嵌套任何元素。

    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);

效果圖：

技術分享圖片

折角效果

如果是規則的折角圖案，如下圖所示，可直接用background實現，詳情可見文章背景應用

技術分享圖片

[代碼就不過多說明了]代碼示例：

    dom結構
    <div class="box"></div>

    基本樣式
    .box {
        width: 200px;
        height: 200px;
        background-color: #58a; /*hack 回退*/
        background: linear-gradient(225deg, transparent 20px, rgba(0, 0, 0, .7) 0), linear-gradient(225deg, transparent 20px, yellowgreen 0);
        background-size: 28px, 100%;
        background-repeat: no-repeat;
        background-position: right top, center;
    }

不同角度的折角實現：

效果圖：

技術分享圖片

代碼：

    .box{
        position: relative;
        background-color: #58a; /*hack 回退*/
        background: linear-gradient(-150deg, transparent 30px, yellowgreen 0);
    }

    .box:before {
        position: absolute;
        content: ‘‘;
        width: 62px;
        height: 34px;
        top: 0;
        right: 0;
        background: linear-gradient(-30deg, transparent 30px, rgba(0, 0, 0, .7) 0);
        transform: rotate(-120deg); 
   }

仍需要借助漸變色實現背景，然後旋轉。

也可以進行更多的優化，如陰影，圓角，效果圖如下：

技術分享圖片

CSS3 transform屬性

相關推薦

CSS3 transform屬性

spec 報錯 left width 四邊形 tran dex 方向 變形 在介紹有關transform相關的知識之前，先來講一下transform-origin的用法以及關於<angle>角度的幾種取值單位。另外，在使用時，為了兼容各個瀏覽器，可加上瀏覽器的私

【CSS3 transform屬性和過渡屬性詳解】

eight tex over doctype ati ext 註意 skew 簡寫 CSS3transform屬性詳解 transform字面上就是變形，改變的意思。 在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動tra

css3 transform屬性多值的順序問題

為我 什麽 AC idt .com mage http attr round 對於transform屬性的多值的順序問題，我自己就被困擾過。後來知道了跟順序有關，但是不知道為什麽。我想應該很多人跟我以前一樣，知其然不知其所以然。如果不知道的，也許這篇文章會對大家有所幫助。

CSS3 transform 屬性

例項 旋轉 div 元素： div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:

對CSS3 transform屬性matrix()矩陣一些學習

1.首先回顧transform屬性的相關知識 先理解網頁上的x,y軸 transform屬性 1.偏移 transform: translate(x,y) ：移動元素位置，x,y為水平和豎直移動的距離，單位是px translateX(x) 定義轉換，只是

CSS3 : transform 與 transform-origin 屬性可以使元素樣式發生轉變

code opera web center IE webkit col 代碼 kit CSS3 : transform 用於元素樣式的轉變，比如使元素發生位移、角度變化、拉伸縮小、按指定角度歪斜 transform結合transition可實現各類動畫效果 transfor

CSS3 transform-origin 屬性

ans nsf and pre head absolute form oct htm <!DOCTYPE html> <html> <head> <style> #div1 { position: relati

css3動畫屬性系列之transform細講scale縮放

span height width 水平 web gin 改變 code num 1、scale(x,y) 對元素進行縮放 X表示水平方向縮放的倍數 | Y表示垂直方向的縮放倍數 Y是一個可選參數，沒有設置的話，則表示X，Y兩個方向的縮放倍數是一

css3動畫屬性詳解之transform、transition、animation

本文轉自segmentfault.com/a/1190000004460780#articleHeader5 css3動畫屬性詳解：關於CSS3製作動畫的幾個屬性：變形(transform)、轉換(transition)和動畫(animation)。 一、transform 屬性：

關於CSS3中transform屬性對元素佈局的影響。

今天瞭解transform屬性時發現一個奇怪的現象，就是使用transform屬性的時候，無論是translate,rotate,skew還是scale，對於偽元素:after和:before，都會產生影響。具體的這個影響體現在哪裡呢？我們通過一個例子來看一看（以下程式碼均

css3動畫-transform屬性

transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜 transform屬性---2D位置移動 1.translate(x,y) 定義：          

css3 transition transform屬性造成文字抖動

現象：資訊欄第一行文字，最後總會抖動 程式碼： .match .match-item{ width: 200px; height: 300px; disp

css3變形屬性transform，rotate（旋轉）,translate（移動）,scale（縮放）,skew（扭曲）,matrix(矩陣)

原文連結這個很簡單，就跟border-radius一樣，就是一個引數，同樣是針對不同的瀏覽器有不同的私有屬性。w3c上的例子是這樣子寫的：·div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */

CSS3動畫屬性：變形(transform)

Transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放

css3常用屬性

cor pos ott file ani pla 書簽 iteration break CSS3 動畫屬性（Animation） @keyframes //規定動畫。 animation //所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

CSS3動畫屬性：動畫(animation)

遞推 text tee 數值 技術 tel time ani 效果 一：動畫(animation)的參數詳解 由於上面用到了animation動畫，這裏詳細介紹下這個animation的參數。 簡介 CSS動畫(Animations)簡單說就是在一段固定的動畫時間內暗

利用CSS3 transform: rotate(xxdeg)畫對角線

log kit borde order ive 一段 dex css -i 直接上代碼。 <style> *{ /*實際開發中，別這樣偷懶哦*/ margin: 0; padding: 0

css3計算屬性(calc)

自適應 cal 寬度 瀏覽器 css 用法 element nth calc 如果有固定頭部高度和底部高度，內容的高度或者寬度想要根據瀏覽器屏幕自適應的話，可以用到css3的計算屬性,即calc。 用法如下： 內容區域高/寬 = calc(100% - 頭部高寬 -

CSS3常用屬性及用法

rip watch code java ash nbsp chrom tran 替代 1.transition: 過渡屬性，可以替代flash和javascript的效果 兼容性：Internet Explorer 9 以及更早的版本，不支持 transition 屬性。

css3新增屬性02

無效 置1 中一 層次選擇器 checked r+ -o rst before CSS3 選擇器 基礎選擇器 通配符選擇器 * ID選擇器 #Id class選擇器 .classname 元素選擇器 tagName 群組選擇器 slecter,selecter 層次選