国产/涩/福利在线,亚州久久久久

一、CSS3變形簡(jiǎn)介

CSS3變形是一些效果的集合，比如平移、旋轉(zhuǎn)、縮放和傾斜效果，每個(gè)效果都稱為變形函數(shù)（Transform Function）。
CSS變形允許動(dòng)態(tài)的控制元素，可以在屏幕周圍移動(dòng)，縮小，旋轉(zhuǎn)，或結(jié)合所有這些產(chǎn)生復(fù)雜的動(dòng)畫效果。

二、變形屬性

1、transform屬性

transform屬性讓元素在一個(gè)坐標(biāo)系統(tǒng)中變形，包含一系列變形函數(shù)。
語法：transform:none|<transform-function>
可用于內(nèi)聯(lián)元素和塊元素，默認(rèn)值為none，表示元素不進(jìn)行變形；另一個(gè)屬性值是<transform-function>，表示一個(gè)或多個(gè)變形函數(shù)，以空格分開。

2、transform-function函數(shù)

所有的2D變形函數(shù)也包含于3D變形規(guī)范中。

2D常用的transform-function的功能

函數(shù)	功能描述
translate()	移動(dòng)元素，可以根據(jù)X軸和Y軸坐標(biāo)重新定位元素位置，兩個(gè)擴(kuò)展函數(shù)translateX()和translateY()
scale()	縮小或放大元素，兩個(gè)擴(kuò)展函數(shù)scaleX()和scaleY()
rotate()	旋轉(zhuǎn)元素
skew()	讓元素傾斜，兩個(gè)擴(kuò)展函數(shù)skewX()和skewY()
matrix()	定義矩陣變形，基于X軸和Y軸坐標(biāo)重新定位元素位置

3D常用的transform-function功能

函數(shù)	功能描述
translate3d()	移動(dòng)元素，用來指定一個(gè)3D變形移動(dòng)位移量
scale3d()	縮放一個(gè)元素
rotate3d()	指定元素具有一個(gè)三維旋轉(zhuǎn)的角度
perspective()	指定一個(gè)透視投影矩陣
matrix3d()	定義矩陣變形

3、transform-origin屬性

transform-origin屬性用來指定元素的中心點(diǎn)位置。變形的原點(diǎn)在元素的中心點(diǎn)，或者是元素X軸和Y軸的50%處。

transform-origin屬性值可以是百分比，em、px等具體的值，也可以是top、right、bottom、left和center的關(guān)鍵詞。

2D變形中的transform-origin屬性可以是一個(gè)參數(shù)值，也可以是兩個(gè)參數(shù)值。如果是兩個(gè)參數(shù)值，第一個(gè)設(shè)置水平方向X軸的位置，第二個(gè)設(shè)置垂直方向Y軸的位置。
3D變形中的transform-origin屬性包括了Z軸。

3D變形中transform-origin屬性

屬性值	功能描述
x-offset	設(shè)置transform-origin水平方向X軸的偏移量，可以是正值（從中心點(diǎn)沿水平方向X軸向右偏移量），也可以是負(fù)值（從中心點(diǎn)沿水平方向X軸向左偏移量）
offset-keyword	是top、right、bottom、left或center中的一個(gè)關(guān)鍵詞，用來設(shè)置transform-origin偏移量
y-offset	設(shè)置transform-origin屬性在垂直方向Y軸的偏移量，可以是正值（從中心點(diǎn)沿垂直方向Y軸向下的偏移量），也可以是負(fù)值（從中心點(diǎn)沿垂直方向向上的偏移量）
x-offset-keyword	是left、right或center中的一個(gè)關(guān)鍵詞，設(shè)置transform-origin屬性值在水平X軸的偏移量
y-offset-keyword	是top、bottom和center中的一個(gè)關(guān)鍵詞，設(shè)置transform-origin屬性值在垂直Y軸的偏移量
z-offset	設(shè)置3D變形中transform-origin遠(yuǎn)離用戶眼睛視點(diǎn)的距離，默認(rèn)值z(mì)=0，取值可以是<length>

4、transform-style屬性

transform-style屬性是3D空間一個(gè)重要屬性，指定嵌套元素如何在3D空間中呈現(xiàn)，主要有兩個(gè)屬性：flat和preserve-3d
語法：transform-style:flat|preserve-3d

flat：默認(rèn)值，表示所有子元素在2D平面呈現(xiàn)
preserve-3d：所有子元素在3D空間呈現(xiàn)

5、perspective屬性

perspective屬性會(huì)設(shè)置查看者的位置，并將可視內(nèi)容映射到一個(gè)視錐上，繼而投到一個(gè)2D視平面上。
語法：perspective:none|<length>
參數(shù)說明：

none：默認(rèn)值，表示無限的角度來看3D物體，但看上去是平的。
<length>：接受一個(gè)長(zhǎng)度單位大于0的值，不能為百分比值。值越大，角度出現(xiàn)的越遠(yuǎn)，從而創(chuàng)建一個(gè)相當(dāng)?shù)偷膹?qiáng)度和非常小的3D空間變化；反之，值越小，角度出現(xiàn)的越近，從而創(chuàng)建一個(gè)高強(qiáng)度的角度和大型的3D變化。

示例圖：

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3變形</title>
    <style>
    .wrapper {
        width: 50%;
        float: left;
    }

    .cube {
        font-size: 4em;
        width: 2em;
        margin: 1.5em auto;
        transform-style: preserve-3d;
        transform: rotateX(-40deg) rotateY(32deg);
    }

    .side {
        position: absolute;
        width: 2em;
        height: 2em;
        background: rgba(255, 99, 71, 0.6);
        border: solid 1px rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        line-height: 2em;
    }

    .front {
        transform: translateZ(1em);
    }

    .top {
        transform: rotateX(90deg) translateZ(1em);
    }

    .right {
        transform: rotateY(90deg) translateZ(1em);
    }

    .bottom {
        transform: rotateX(-90deg) translateZ(1em);
    }

    .left {
        transform: rotateY(90deg) translateZ(1em);
    }

    .back {
        transform: rotateY(-180deg) translateZ(1em);
    }

    .w1 {
        perspective: 100px;
    }

    .w2 {
        perspective: 1000px;
    }
    </style>
</head>
<body>
    <div class="wrapper w2">
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w1">
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
</body>
</html>

perspective的簡(jiǎn)單結(jié)論：

perspective取值為none或不設(shè)置，沒有3D空間。
perspective取值越小，3D效果就越明顯，也就眼睛越靠近真3D；
perspective的值無窮大，或值為0時(shí)與取值為none效果一樣

perspective()函數(shù)與perspective屬性：

perspective函數(shù)也可以激活3D空間，不同之處：perspective用在舞臺(tái)元素上（變形元素的父元素）；perspective()函數(shù)用在當(dāng)前變形元素上。

6、perspective-origin屬性

該屬性默認(rèn)值為50% 50%（就是center），可以設(shè)置為一個(gè)值，也可以設(shè)置為兩個(gè)長(zhǎng)度值。

第一個(gè)長(zhǎng)度值指定相對(duì)于元素的包含框的X軸上的位置，可以是長(zhǎng)度值、百分比或以下關(guān)鍵詞之一：

left：在包含框的X軸方向長(zhǎng)度的0%
center：中間點(diǎn)
right：長(zhǎng)度的100%

第二個(gè)長(zhǎng)度值指定相對(duì)于元素的包含框的Y軸上的位置，可以是長(zhǎng)度值、百分比或以下關(guān)鍵詞之一：

left：在包含框的X軸方向長(zhǎng)度的0%
center：中間點(diǎn)
right：長(zhǎng)度的100%

注意：為了指轉(zhuǎn)換子元素變形的深度，perspective-origin屬性必須定義在父元素上。perspective-origin屬性需要與perspective屬性結(jié)合起來使用，以便將視點(diǎn)移至元素的中心以外的位置。

示例圖：

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3變形</title>
    <style>
    .wrapper {
        width: 30%;
        display: inline-block;
        padding-bottom: 1em;
    }

    .wrapper h1 {
        text-align: center;
        font-size: 1.5em;
    }

    .cube {
        font-size: 2em;
        width: 2em;
        height: 2em;
        margin: .5em auto;
        transform-style: preserve-3d;
        perspective: 250px;
    }

    .w1 .cube {
        perspective-origin: top left;
    }

    .w2 .cube {
        perspective-origin: top;
    }

    .w3 .cube {
        perspective-origin: top right;
    }

    .w4 .cube {
        perspective-origin: left;
    }

    .w5 .cube {
        perspective-origin: center;
    }

    .w6 .cube {
        perspective-origin: right;
    }

    .w7 .cube {
        perspective-origin: bottom left;
    }

    .w8 .cube {
        perspective-origin: bottom;
    }

    .w9 .cube {
        perspective-origin: bottom right;
    }

    .side {
        position: absolute;
        width: 2em;
        height: 2em;
        background: rgba(255, 99, 71, 0.6);
        border: solid 1px rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        line-height: 2em;
    }

    .front {
        transform: translateZ(1em);
    }

    .top {
        transform: rotateX(90deg) translateZ(1em);
    }

    .right {
        transform: rotateY(90deg) translateZ(1em);
    }

    .left {
        transform: rotateY(-90deg) translateZ(1em);
    }

    .bottom {
        transform: rotateX(-90deg) translateZ(1em);
    }

    .back {
        transform: rotateY(-180deg) translateZ(1em);
    }
    </style>
</head>
<body>
    <div class="wrapper w1">
        <h1><code>top left</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w2">
        <h1><code>top</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w3">
        <h1><code>top right</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w4">
        <h1><code>left</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w5">
        <h1><code>center</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w6">
        <h1><code>right</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w7">
        <h1><code>bottom left</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w8">
        <h1><code>bottom</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w9">
        <h1><code>bottom right</code></h1>
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
</body>
</html>

7、backface-visibility屬性

backface-visibility決定元素旋轉(zhuǎn)背面是否可見。對(duì)于未旋轉(zhuǎn)的元素，該元素的正面面向觀看者。當(dāng)其Y軸旋轉(zhuǎn)約180度時(shí)會(huì)導(dǎo)致元素的背面面對(duì)觀眾。
語法：backface-visibility:visible|hidden

visible：默認(rèn)值，反面可見
hidden：反面不可見

三、CSS3 2D 變形

1、2D位移

在這里 translate是一種方法，將元素向指定的方向移動(dòng)。可以理解為，使用translate()函數(shù)可以把元素從原來的位置移動(dòng)，而不影響在X、Y軸上任何組件。

語法：translate(tx)或translate(tx,ty)
translate()函數(shù)可以取一個(gè)值，也可以取兩個(gè)值。
參數(shù)說明：

tx：代表X軸（橫坐標(biāo)）移動(dòng)的向量長(zhǎng)度，為正值時(shí)，元素向X軸右方向移動(dòng)；為負(fù)值時(shí)，元素向X軸左方向移動(dòng)。
ty：代表Y軸（縱坐標(biāo)）移動(dòng)的向量長(zhǎng)度，為正值時(shí)，元素向Y軸下方向移動(dòng)；為負(fù)值時(shí)，元素向Y軸上方向移動(dòng)。如果ty沒有顯示設(shè)置時(shí)，相當(dāng)于ty=0.

結(jié)合起來，translate()函數(shù)移動(dòng)元素主要有以下三種情況：

水平移動(dòng)：向右移動(dòng)translate(tx,0)，向左移動(dòng)translate(-tx,0)。
垂直移動(dòng)：向上移動(dòng)translate(0,-ty)，向下移動(dòng)translate(0,ty)。
對(duì)角移動(dòng)：右下角移動(dòng)translate(tx,ty)、右上角移動(dòng)translate(tx,-ty)、左上角移動(dòng)translate(-tx,-ty)，左下角translate(-tx,ty)。

單獨(dú)一個(gè)方向移動(dòng)對(duì)象的方法：

translateX：水平方向移動(dòng)一個(gè)對(duì)象。對(duì)象只向X軸進(jìn)行移動(dòng)。為正值，對(duì)象向右移動(dòng)；為負(fù)值，對(duì)象向左移動(dòng)。
translateY：垂直方向移動(dòng)一個(gè)對(duì)象。對(duì)象只向Y軸進(jìn)行移動(dòng)。為正值，對(duì)象向下移動(dòng)；為負(fù)值，對(duì)象向上移動(dòng)。

2、2D縮放

縮放函數(shù)scale()讓元素根據(jù)中心原點(diǎn)對(duì)對(duì)象進(jìn)行縮放，默認(rèn)值為1。0.01~0.99之間的值使一個(gè)元素縮?。淮笥诘扔?.01的值使元素顯得更大。

語法：scale(sx)或scale(sx,sy)
可以接受一個(gè)值，也可以接受兩個(gè)值，只有一個(gè)值時(shí)，第二個(gè)值默認(rèn)與第一個(gè)值相等。

sx：指定橫向坐標(biāo)（X軸）方向的縮放量。如果值為0.01~0.99之間的值使對(duì)象在X軸方向縮?。蝗绻禐榇笥诘扔?.01的值使對(duì)象在X軸方向放大。
sy：指定縱坐標(biāo)（Y軸）方向的縮放量。如果值為0.01~0.99之間的值使對(duì)象在Y軸方向縮小；如果值為大于等于1.01的值使對(duì)象在Y軸方向放大。

單獨(dú)一個(gè)方向縮放對(duì)象的方法：

scaleX：相當(dāng)于scale(sx,1)，表示元素只在X軸縮放元素，默認(rèn)值是1；
scaleY：相當(dāng)于scale(1,sy)，表示元素只在Y軸縮放元素，默認(rèn)值是1；

在scale()函數(shù)中除了可以取正值，還可以取負(fù)值，只不過取負(fù)值時(shí)，會(huì)先讓元素反轉(zhuǎn)再進(jìn)行縮放。

scale()函數(shù)對(duì)元素進(jìn)行縮放時(shí)，都是以元素的中心為基點(diǎn)，但可以通過transform-origin改變?cè)氐幕c(diǎn)。

3、2D旋轉(zhuǎn)

rotate()函數(shù)通過指定角度對(duì)元素對(duì)象的原點(diǎn)指定一個(gè)2D旋轉(zhuǎn)。如果為正值，元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果為負(fù)值，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。

語法：rotate(a)，只接受一個(gè)值，代表旋轉(zhuǎn)的角度值。

示例圖：

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3變形</title>
    <style>
     .rot{
        width:5em;
        height: 5em;
        border:solid rgba(0,0,0,0.5) 1px;
        background-color:orange;
        margin:5em 2em;
        display: inline-block; 
     }
     .rot45deg{
        transform:rotate(45deg);
     }
     .rot-45deg{
        transform:rotate(-45deg);
     } 
    </style>
</head>
<body>
    <div class="rot rot45deg">順時(shí)針旋轉(zhuǎn)45度</div>
    <div class="rot">原圖</div>
    <div class="rot rot-45deg">逆時(shí)針旋轉(zhuǎn)45度</div>
</body>
</html>

4、2D傾斜

skew()函數(shù)可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。與rotate()只會(huì)旋轉(zhuǎn)，不會(huì)改變?cè)氐男螤?，skew函數(shù)會(huì)改變?cè)氐男螤睢?/p>

語法：skew(ax)或skew(ax,ay)
如果為設(shè)置值，默認(rèn)為0。

ax：指定元素水平方向（X軸）傾斜的角度；
ay：指定元素垂直方向（Y軸）傾斜的角度；

單獨(dú)一個(gè)方向傾斜對(duì)象的方法：

skewX()：相當(dāng)于skew(ax,0)和skew(ax)。skewX()使元素以其中心為基點(diǎn)，在水平方向傾斜；
skewY()：相當(dāng)于skew(0,ay)。skewY()使元素以其中心為基點(diǎn)，在垂直方向傾斜；

默認(rèn)值情況下，skew()函數(shù)以元素的原中心點(diǎn)對(duì)元素進(jìn)行傾斜變形，但可以通過transform-origin屬性重新設(shè)置元素基點(diǎn)對(duì)元素進(jìn)行傾斜變形。

5、2D矩陣

變形中的矩陣函數(shù)matrix()不常用。在CSS3中的變形都可以使用matrix()函數(shù)代替。

四、CSS3 3D變形

使用三維變形，可以改變?cè)卦赯軸位置。三維變換使用基于二維變換的相同屬性。
3D變換主要包括以下幾種功能函數(shù)：

3D位移：包括translateZ()和translate3d()兩個(gè)功能函數(shù)；
3D旋轉(zhuǎn)：包括rotateX()、rotateY()、rotateZ()和rotate3d()四個(gè)功能函數(shù)；
3D縮放：包括scaleZ()和scale3d()兩個(gè)功能函數(shù)；
3D矩陣：和2D變形一樣，也有一個(gè)3D矩陣功能函數(shù)matrix3d()。

1、3D位移

translate3d()函數(shù)的語法：translate3d(tx,ty,tz)
參數(shù)說明：

tx：代表橫坐標(biāo)位移向量的長(zhǎng)度；
ty：代表縱坐標(biāo)位移向量的長(zhǎng)度；
tz：代表Z軸位移向量的長(zhǎng)度。不能為百分比值。

translateZ()函數(shù)的語法：translateZ(t)，取值t指的是Z軸的向量位移長(zhǎng)度。使用TranslateZ()可以讓元素在Z軸進(jìn)行位移。為負(fù)值時(shí)，元素在Z軸越移越遠(yuǎn)，導(dǎo)致元素變得較??；為正值時(shí)，元素在Z軸越移越近，導(dǎo)致元素變得較大。

translateZ()函數(shù)在實(shí)際使用中等同于translate3d(0,0,tz)。

2、3D縮放

當(dāng)scale3d()中X軸和Y軸同時(shí)為1，即scale3d(1,1,sz)，效果等同于scaleZ(sz)。

scale3d語法：scale3d(sx,sy,sz)，可以讓元素在Z軸上按比例縮放。默認(rèn)值為1，當(dāng)值大于1時(shí)，元素放大；當(dāng)值小于1大于0.01時(shí)，元素縮小。

scaleZ()語法：scaleZ(s)，取值s指定每個(gè)點(diǎn)Z軸的比例。scaleZ(-1)定義了一個(gè)原點(diǎn)在Z軸的對(duì)稱點(diǎn)。

提示：scaleZ()和scale3d()函數(shù)單獨(dú)使用時(shí)沒有任何效果，需要配合其它變形函數(shù)一起使用時(shí)才有效果。

3、3D旋轉(zhuǎn)

在三維空間里，使用rotateX()、rotateY()和rotateZ()函數(shù)讓一個(gè)元素圍繞X、Y、Z軸旋轉(zhuǎn)。
語法：rotateX(a)|rotateY(a)|rotateZ(a)，其中a指的是旋轉(zhuǎn)角度值，可以是正值，也可以是負(fù)值。為正值，元素順時(shí)針旋轉(zhuǎn)；為負(fù)值，元素逆時(shí)針旋轉(zhuǎn)。

rotate3d()函數(shù)也可以讓元素在三維空間中旋轉(zhuǎn)，軸的旋轉(zhuǎn)是由一個(gè)[x,y,z]向量并經(jīng)過元素原點(diǎn)。語法：rotate3d(x,y,z,a)
參數(shù)說明：

x：0~1的數(shù)值，用來描述元素圍繞X軸旋轉(zhuǎn)的矢量值；
y：0~1的數(shù)值，用來描述元素圍繞Y軸旋轉(zhuǎn)的矢量值；
z：0~1的數(shù)值，用來描述元素圍繞Z軸旋轉(zhuǎn)的矢量值；
a：角度值，用來指定元素在3D空間旋轉(zhuǎn)的角度。正值時(shí)，元素順時(shí)針旋轉(zhuǎn)；負(fù)值時(shí)，元素逆時(shí)針旋轉(zhuǎn)。

當(dāng)x、y、z取不同值時(shí)，和前面的三個(gè)旋轉(zhuǎn)函數(shù)功能等同：

rotateX(a)函數(shù)功能等同于rotate3d(1,0,0,a)；
rotateY(a)函數(shù)功能等同于rotate3d(0,1,0,a)；
rotateZ(a)函數(shù)功能等同于rotate3d(0,0,1,a)；

4、3D矩陣

語法：matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)

提示：傾斜是二維變形，不能在三維空間變形，元素可能會(huì)在X軸和Y軸傾斜，然后轉(zhuǎn)化為三維，但它們不能在Z軸傾斜。

5、多重變形

在CSS3中，不管是2D變形還是3D變形，都可以使用多重變形，它們之間使用空格分隔，語法：transform:<transform-function>|<transform-function>

其中，transform-function是指CSS3中的任何變形函數(shù)。

示例1：2D多重變形制作立方體

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3變形</title>
    <style>
     @keyframes spin{
        0%{transform:rotateY(0deg)}
        100%{transform:rotateY(360deg)}
     }
     .stage{
        width:300px;
        height: 300px;
        float: left;
        margin:15px;
        background: url(img/background.png) no-repeat center center;
        background-size:100% 100%;
        position: relative;
        perspective: 1200px;
     }
     .container{
        position: relative;
        height: 230px;
        width:100px;
        top:50%;
        left: 50%;
        margin:-100px 0 0 -50px;
        transform-style: preserve-3d;
     }
     .container:hover{
        animation: spin 5s linear infinite;
     }
     .side{
        font-size:20px;
        font-weight: bold;
        height: 100px;
        line-height: 100px;
        color:#fff;
        position: absolute;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
        text-transform: uppercase;
        width:100px;
     }
     .top{
        background:#9acc53;
        transform:rotate(-45deg) skew(15deg,15deg);
     }
     .left{
        background:#8ec63f;
        transform:rotate(15deg) skew(15deg,15deg) translate(-50%,100%);
     }
     .right{
        background:#80b239;
        transform:rotate(-15deg) skew(-15deg,-15deg) translate(50%,100%);
     }
    </style>
</head>
<body>
    <div class="stage s1">
        <div class="container">
            <div class="side top">1</div>
            <div class="side left">2</div>
            <div class="side right">3</div>
        </div>
    </div>
</body>
</html>

示例圖2：3D多重變形制作立方體

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3變形</title>
    <style>
     @keyframes spin{
        0%{transform:rotateY(0deg)}
        100%{transform:rotateY(360deg)}
     }
     .stage{
        width:300px;
        height: 300px; 
        margin:15px auto;
        background: url(img/background.png) no-repeat center center;
        background-size:100% 100%;
        position: relative;
        perspective: 300px;
     }
     .container{
        position: absolute;
        height: 230px;
        width:100px;
        top:50%;
        left: 50%;
        margin:-100px 0 0 -100px;
        transform:translateZ(-100px);
        transform-style:preserve-3d;
     } 
     .container:hover{
        animation: spin 5s linear infinite;
     }
     .side{
      background:rgba(142,198,63,0.3);
      border:2px solid #8ec63f;
      font-size: 60px;
      font-weight: bold;
      color:#fff;
      height: 196px;
      line-height: 196px;
      position: absolute;
      text-align: center;
      text-shadow:0 -1px 0 rgba(0,0,0,0.2);
      text-transform:uppercase;
      width:196px;
     }
     .front{
        transform:translateZ(100px);
     }
     .back{
        transform:rotateX(180deg) translateZ(100px);
     }
     .top{
        transform:rotateX(90deg) translateZ(100px);
     }
     .left{
        transform:rotateY(-90deg) translateZ(100px);
     }
     .right{
        transform:rotateY(90deg) translateZ(100px);
     }
     .bottom{
        transform:rotateX(-90deg) translateZ(100px);
     }
    </style>
</head>
<body>
    <div class="stage s1">
        <div class="container">
            <div class="side front">1</div>
            <div class="side back">2</div>
             <div class="side left">3</div>
            <div class="side right">4</div>
            <div class="side top">5</div>
           <div class="side bottom">6</div>
        </div>
    </div>
</body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS3之變形

CSS3之變形

一、CSS3變形簡(jiǎn)介

二、變形屬性

1、transform屬性

2、transform-function函數(shù)

3、transform-origin屬性

4、transform-style屬性

5、perspective屬性

perspective的簡(jiǎn)單結(jié)論：

perspective()函數(shù)與perspective屬性：

6、perspective-origin屬性

7、backface-visibility屬性

三、CSS3 2D 變形

1、2D位移

2、2D縮放

3、2D旋轉(zhuǎn)

4、2D傾斜

5、2D矩陣

四、CSS3 3D變形

1、3D位移

2、3D縮放

3、3D旋轉(zhuǎn)

4、3D矩陣

5、多重變形

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS3之變形

一、CSS3變形簡(jiǎn)介

二、變形屬性

1、transform屬性

2、transform-function函數(shù)

3、transform-origin屬性

4、transform-style屬性

5、perspective屬性

perspective的簡(jiǎn)單結(jié)論：

perspective()函數(shù)與perspective屬性：

6、perspective-origin屬性

7、backface-visibility屬性

三、CSS3 2D 變形

1、2D位移

2、2D縮放

3、2D旋轉(zhuǎn)

4、2D傾斜

5、2D矩陣

四、CSS3 3D變形

1、3D位移

2、3D縮放

3、3D旋轉(zhuǎn)

4、3D矩陣

5、多重變形

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

二、變形屬性

1、transform屬性

2、transform-function函數(shù)

3、transform-origin屬性

6、perspective-origin屬性

三、CSS3 2D 變形

1、2D位移

4、2D傾斜

四、CSS3 3D變形

2、3D縮放

4、3D矩陣

5、多重變形