2. 程式人生 > >css transform旋轉屬性

css transform旋轉屬性

阿新 • • 發佈：2019-04-25
元素 function 情況 ott meta 圖形 tin 介紹 form

將以下代碼復制到本地就可以看到效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform屬性</title>
</head>
<style type="text/css">
     .oneX{
        border: 2px crimson solid;
        background-color: chartreuse;
        width: 100px;
        height: 100px;
         transform: rotateX(0deg);
         
 
-moz-transform: rotateX(0deg);
         -webkit-transform: rotateX(0deg);
         -ms-transform: rotateX(0deg);
    }
     .oneY{
         border: 2px crimson dashed;
         background-color: chartreuse;
         width: 100px;
         height: 100px;
         transform: rotateY(0deg);
         
 
-moz-transform: rotateY(0deg);
         -webkit-transform: rotateY(0deg);
         -ms-transform: rotateY(0deg);

     }
     .one{
         border: 2px crimson dashed;
         background-color: chartreuse;
         width: 100px;
         height: 100px;
     }
     .oneO{
         border: 2px crimson dashed;
         background
 
-color: chartreuse;
         width: 100px;
         height: 100px;
         margin: 150px;
         transform-origin: 0 0;
         -webkit-transform-origin: 0 0;
         -ms-transform-origin: 0 0;
         -moz-transform-origin: 0 0;
         -webkit-transform-style: preserve-3d;
     }
     .one3D{
         border: 2px crimson dashed;
         background-color: chartreuse;
         width: 100px;
         height: 100px;
         margin: 150px;
         transform-origin: 50% 50% 75px;
         -webkit-transform-origin: 50% 50% 75px;
         -ms-transform-origin:  50% 50% 75px;
         -moz-transform-origin:  50% 50% 75px;
         -webkit-transform-style: preserve-3d;
         transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
         -ms-transform-style: preserve-3d;
         box-shadow: 10px 10px 5px #888888;
     }
     .one2D{
         border: 2px crimson dashed;
         background-color: chartreuse;
         width: 100px;
         height: 100px;
         margin: 150px;
         transform-origin: 50% 50% 75px;
         -webkit-transform-origin: 50% 50% 75px;
         -ms-transform-origin:  50% 50% 75px;
         -moz-transform-origin:  50% 50% 75px;
         -webkit-transform-style: flat;
         transform-style: flat;
         -moz-transform-style: flat;
         -ms-transform-style: flat;
         box-shadow: 10px 10px 5px #888888;
     }
</style>
<body>
<p>只有在transform屬性存在情況下transform-style和transform-origin才會有效果。</p>
<p>transform屬性介紹：</p>
<table>

    <tbody><tr>
        <th style="width:25%">值</th>
        <th>描述</th>

    </tr>

    <tr>
        <td>none</td>
        <td>定義不進行轉換。</td>

    </tr>

    <tr>
        <td>matrix(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>
        <td>定義 2D 轉換，使用六個值的矩陣。</td>

    </tr>

    <tr>
        <td>matrix3d(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>
        <td>定義 3D 轉換，使用 16 個值的 4x4 矩陣。</td>

    </tr>

    <tr>
        <td>translate(<i>x</i>,<i>y</i>)</td>
        <td>定義 2D 轉換。</td>

    </tr>

    <tr>
        <td>translate3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>
        <td>定義 3D 轉換。</td>

    </tr>

    <tr>
        <td>translateX(<i>x</i>)</td>
        <td>定義轉換，只是用 X 軸的值。</td>

    </tr>

    <tr>
        <td>translateY(<i>y</i>)</td>
        <td>定義轉換，只是用 Y 軸的值。</td>

    </tr>

    <tr>
        <td>translateZ(<i>z</i>)</td>
        <td>定義 3D 轉換，只是用 Z 軸的值。</td>

    </tr>

    <tr>
        <td>scale(<i>x</i>[,<i>y</i>]?) </td>
        <td>定義 2D 縮放轉換。</td>

    </tr>

    <tr>
        <td>scale3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>
        <td>定義 3D 縮放轉換。</td>

    </tr>

    <tr>
        <td>scaleX(<i>x</i>)</td>
        <td>通過設置 X 軸的值來定義縮放轉換。</td>

    </tr>

    <tr>
        <td>scaleY(<i>y</i>)</td>
        <td>通過設置 Y 軸的值來定義縮放轉換。</td>

    </tr>

    <tr>
        <td>scaleZ(<i>z</i>)</td>
        <td>通過設置 Z 軸的值來定義 3D 縮放轉換。</td>

    </tr>

    <tr>
        <td>rotate(<i>angle</i>)</td>
        <td>定義 2D 旋轉，在參數中規定角度。</td>

    </tr>

    <tr>
        <td>rotate3d(<i>x</i>,<i>y</i>,<i>z</i>,<i>angle</i>)</td>
        <td>定義 3D 旋轉。</td>

    </tr>

    <tr>
        <td>rotateX(<i>angle</i>)</td>
        <td>定義沿著 X 軸的 3D 旋轉。</td>

    </tr>

    <tr>
        <td>rotateY(<i>angle</i>)</td>
        <td>定義沿著 Y 軸的 3D 旋轉。</td>

    </tr>

    <tr>
        <td>rotateZ(<i>angle</i>)</td>
        <td>定義沿著 Z 軸的 3D 旋轉。</td>

    </tr>

    <tr>
        <td>skew(<i>x-angle</i>,<i>y-angle</i>)</td>
        <td>定義沿著 X 和 Y 軸的 2D 傾斜轉換。</td>

    </tr>

    <tr>
        <td>skewX(<i>angle</i>)</td>
        <td>定義沿著 X 軸的 2D 傾斜轉換。</td>

    </tr>

    <tr>
        <td>skewY(<i>angle</i>)</td>
        <td>定義沿著 Y 軸的 2D 傾斜轉換。</td>

    </tr>

    <tr>
        <td>perspective(<i>n</i>)</td>
        <td>為 3D 轉換元素定義透視視圖。</td>

    </tr>
    </tbody></table>
<p>實例:</p>
<p>X軸旋轉：</p>
<div class="oneX"></div>
<p>Y軸旋轉：</p>
<div class="oneY"></div>
<p>平面旋轉：</p>
<div class="one"></div>
<p>transform-origin定位旋轉的錨點：就是設置圖形按照哪一個點旋轉。舉例：把一張白紙使用冒頂釘在墻上，轉動白紙，白紙圍繞釘子轉，釘子的位置就是錨點。</p>
<table class="reference">

    <tbody><tr>
        <th style="width:25%">值</th>
        <th>描述</th>
    </tr>

    <tr>
        <td>x-axis</td>
        <td>
            <p>定義視圖被置於 X 軸的何處。可能的值：</p>
            <ul class="listintable">
                <li>left</li>
                <li>center</li>
                <li>right</li>
                <li><i>length</i></li>
                <li><i>%</i></li>
            </ul>
        </td>
    </tr>

    <tr>
        <td>y-axis</td>
        <td>
            <p>定義視圖被置於 Y 軸的何處。可能的值：</p>
            <ul class="listintable">
                <li>top</li>
                <li>center</li>
                <li>bottom</li>
                <li><i>length</i></li>
                <li><i>%</i></li>
            </ul>
        </td>
    </tr>

    <tr>
        <td>z-axis</td>
        <td>
            <p>定義視圖被置於 Z 軸的何處。可能的值：</p>
            <ul class="listintable">
                <li><i>length</i></li>
            </ul>
        </td>
    </tr>
    </tbody></table>
<div class="oneO"></div>
<p>transform-style設置旋轉模式為2D還是3D。3d效果必須采用transform支持3d的方法，否則將會是2D效果。</p>
<table >

    <tbody><tr>
        <th style="width:25%">值</th>
        <th>描述</th>
    </tr>

    <tr>
        <td>flat</td>
        <td>表示所有子元素在2D平面呈現。</td>
    </tr>

    <tr>
        <td>preserve-3d</td>
        <td>表示所有子元素在3D空間中呈現。</td>
    </tr>
    </tbody></table>
<div class="one3D">3D</div>
<div class="one2D">2D</div>
</body>
<script type="text/javascript">
    var divX = document.getElementsByClassName("oneX")[0];
    var divY = document.getElementsByClassName("oneY")[0];
    var div = document.getElementsByClassName("one")[0];
    var divO = document.getElementsByClassName("oneO")[0];
    var div3D = document.getElementsByClassName("one3D")[0];
    var div2D = document.getElementsByClassName("one2D")[0];
    var i=0;
    setInterval(function () {
        i+=5;
        divX.style.transform="rotateX("+i+"deg)";
        divY.style.transform="rotateY("+i+"deg)";
        div.style.transform="rotate("+i+"deg)";
        divO.style.transform="rotate("+i+"deg)";
        div3D.style.transform="rotate3d(75,75,75,"+i+"deg)";
        div2D.style.transform="rotate("+i+"deg)";
        if(i==720){
            i=0;
        }
        /*transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);*/

    },100);
</script>
</html>

transform屬性

只有在transform屬性存在情況下transform-style和transform-origin才會有效果。

transform屬性介紹：

值描述
none 定義不進行轉換。
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設置 X 軸的值來定義縮放轉換。
scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視視圖。

實例:

X軸旋轉：

Y軸旋轉：

平面旋轉：

transform-origin定位旋轉的錨點：就是設置圖形按照哪一個點旋轉。舉例：把一張白紙使用冒頂釘在墻上，轉動白紙，白紙圍繞釘子轉，釘子的位置就是錨點。

值描述
x-axis

定義視圖被置於 X 軸的何處。可能的值：

  • left
  • center
  • right
  • length
  • %
y-axis

定義視圖被置於 Y 軸的何處。可能的值：

  • top
  • center
  • bottom
  • length
  • %
z-axis

定義視圖被置於 Z 軸的何處。可能的值：

  • length

transform-style設置旋轉模式為2D還是3D。3d效果必須采用transform支持3d的方法，否則將會是2D效果。

值描述
flat 表示所有子元素在2D平面呈現。
preserve-3d 表示所有子元素在3D空間中呈現。
3D 2D

css transform旋轉屬性

相關推薦

css transform旋轉屬性

元素 function 情況 ott meta 圖形 tin 介紹 form 將以下代碼復制到本地就可以看到效果： <!DOCTYPE html> <html lang="en"> <head> <meta ch

CSS transform中的rotate的旋轉中心怎麽設置

post rst mes 對比 body 改變 lin web nta transform-origin屬性 默認情況，變形的原點在元素的中心點，或者是元素X軸和Y軸的50%處。我們沒有使用transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、移

vue 新增旋轉圖片 修改css transform 值

//點選放大圖片並旋轉圖片 conponents組建 <template>    <!-- 過渡動畫 -->    <transition name="fade">    &nbs

CSS transform的rotate，內部元素旋轉到背後仍會顯示。

在寫程式碼的時候出現了一個問題，當使用了CSS3的transform的時候，對下面這個元素進行旋轉： //DOM元素的結構 <figure class="img-figure">

css3 Matrix：可以同時縮放旋轉平移的transform的屬性值

css3 Matrix：可以同時縮放旋轉平移元素的transform的屬性值 我比較懶，為了方便同樣跟我一樣懶得人，直接上乾貨！ Matrix是什麼？ Matrix是Css3中的一個的一個新屬性transform的屬性值，transform用來元素的2D或3D變

css中那些屬性可以被繼承

mil 屬性 ria ext direct tran ade weight -s 主要的有： 字體相關：line-height, font-family, font-size, font-style, font-variant, font-weight, font 文本相關

CSS border-image屬性

subject resp 進制 柵格圖像 分用 實際應用 變形 rep 檢查 CSS border-image 屬性 border-image屬性很容易記，它允許你將圖片或CSS漸變形狀作為一個元素的邊框。 .module {border-image: url(b

分針網——每日分享：CSS 自定義屬性：API 篇

css JQuery是一個非常優秀的js庫。 選擇元素 $( )裏可以填css選擇器 $(’.demo’).

CSS中position屬性( absolute | relative | static | fixed )詳解

ack 關系 tail 而且 tools css bar 簡單 tag 我們先來看看CSS3 Api中對position屬性的相關定義： static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。 relative：對象遵

css之定位屬性

color 進行 塊級元素 文檔 定義 adding absolut 表示 頁面 定位標簽：position包含的屬性：relative（相對）與 absolute（絕對）1.position:relative：如果對一個元素進行相對定位，首先它將出現在它所在的位置上。 然

JS 對html標簽的屬性的幹預以及JS 對CSS 樣式表屬性的幹預

inpu cti doc tel tex ttext button abcd element -任何標簽的任何屬性都可以修改! -HTML裏是怎麽寫, JS就怎麽寫 以下是一段js 作用於 css 的 href的 代碼 <link id="l1"

（轉）第03節：在Canvas上插入圖片並設置旋轉屬性

doctype script border wid bsp viewport 設置 css樣式 png 我們已經學會了在Canvas上畫簡單的圖形，這節我們就在Canvas上加一張圖片。用到fabric.Image對象把圖片添加到Canvas上。 HTML文件：為了效果更好

css float 浮動屬性

com 標準 value 高度 相等 技術 doc char pre 一、相關概念介紹 　　1、文檔流 　　 HTML頁面的標準文檔流(默認布局)是：從上到下，從左到右，遇塊(塊級元素)換行。 　　2、浮動層 　　　 給元素的float屬性賦值後，就是脫離文檔流

CSS text-decoration 屬性

java 實例 ati 默認值 span 文本 bject 允許 用戶 定義和用法 text-decoration 屬性規定添加到文本的修飾。 註釋：修飾的顏色由 "color" 屬性設置。 說明 這個屬性允許對文本設置某種效果，如加下劃線。如果後代元素沒有自己的裝飾，祖先

CSS中新屬性calc()

除了 foo http standard 內容 afa 給他 5% 同事 CSS3的calc() calc()對大家來說，或許很陌生，不太會相信calc()是css中的部分。因為看其外表像個函數，既然是函數為何

css布局屬性

body 浮動 left 容器 清除 常用 空間 style 文檔流 文檔流類型：文檔中的元素在排列顯示的顯示規則，html中提供了3中文檔流類型控制元素的布局方式。 普通流：文檔中的元素默認顯示顯示規則。 從上到下，從左到右 塊級元素獨占一行 元素不能重疊（無法交

CSS之transition屬性

clas art idt back htm margin val eight ack 1.鼠標移動到div中背景顏色慢慢變化（1個屬性的變化） <!DOCTYPE html> <html> <head> &

CSS之 float 屬性

spa 需要 字符 pre play ie8 -s table style 特性： float的設計初衷僅僅是文字環繞效果 浮動具有破壞性,會使父容器高度塌陷 清除浮動方法: 1.腳底插入cleart:both 2.父元素BFC(IE8+)/haslayout(IE

css標簽屬性及用法

靜態 奇數 放大 顏色 出現 type nor 註意 visit css標簽及屬性 HTML引入CSS的方法 1.嵌入式 <style type = “text/css”>要寫的樣式</style> 2.外聯式 <link rel =

CSS background-clip 屬性

spa ima com 圖片 meta tin html clas span <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜