<i id="yupd0"></i>
  • <i id="yupd0"></i>
  • <thead id="yupd0"></thead>
    <blockquote id="yupd0"></blockquote>
    <i id="yupd0"></i>
  • 碼迷,www.greeshyz.com
    首頁 > Web開發 > 詳細

    CSS3 transform屬性

    時間:2018-01-02 19:52:44      閱讀:12786      評論:0      收藏:0      [點我收藏+]

    標簽:直接   http   add   查看   示例   use   操作   opera   更改   

    在介紹有關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屬性

    標簽:直接   http   add   查看   示例   use   操作   opera   更改   

    原文地址:https://www.cnblogs.com/minghui007/p/8178423.html

    (0)
    (0)
       
    舉報
    評論 一句話評論(0
    登錄后才能評論!
    迷上了代碼!
    91色国产论坛,久草99福利资源,青青草在线华人,99热在线视频观看免费,青青草a片免费看,青青草av视频导航,香蕉网站伊人大香蕉 青青碰人青青草免费 国产自拍偷拍在线播放 青青草华人在线av 伊人影院在线大香 无码大香蕉网伊人色 久久大香蕉视频网 青草精品资源在线 伊人大香蕉在线精品 97资源总站久久爱视频 自拍中文字幕 青青草手机在线视频 青青草久久爱大香蕉 国产青青草自拍 伊人大香蕉在线精品 97资源总站久久爱视频 自拍中文字幕 av图片在线看 久草视频福利免费资源站 自拍国产视频在线 www.琪琪色 爱色影爱色搞搞 97资源库 大香萑a久草视频 久草在线福利资站 青青草成人在线免费视频 久久精品国can视频在热 99热国产情侣偷拍 国产自拍 在线 凹凸分类视频97免费 av啪啪中文网站 青青草91自拍视频 奇米影视第四色 国产无限制自拍 大香蕉伊人精品在线 久久手机看片国产免费 无码大香蕉网伊人色 亚洲激情色 久草99福利资源 狼人色终合网站 91色国产色去色 2019奇米777奇米网 久久草妹妹色 米奇影院888奇米色 青青青草成人免费现看 超碰自拍 在线99热这里精品 色琪琪永久无码 伊人大香蕉成人视频综合 国产自拍视频在线 大香蕉伊人久操在线 青青草久草热久久草 偷拍自拍第四色 奇米网电影网 超碰99久久天天拍日日操 天天拍天天拍久草片 激情图片,激情小说 超碰碰av大香蕉伊人 久草97大香蕉伊人 美女伊人色情香蕉网站 青青草华人免费视频在线 大香蕉伊人久草视频 奇米网在线手机在线 青草七次郞视频观看 青青草公开在线观看 狠狠夜夜干大香蕉伊人 777奇米网 日逼视频网站 欧美人和动物XXX 大香蕉色 欧美 国产 奇米影院首页 大香蕉伊人久久爱在线 青青青草免费手机播放 国产青青草 欧美一级黑寡妇夜夜干 啪啪 国产精品 东方aⅴ在线看 手机看A片 777米奇色狠狠俺去啦 香蕉网站伊人中文字幕 久操在线新免费视频 伊人影院在线大香 大香蕉成人伊人在线视频 青青草成人在线视频观看 91国产自拍偷拍视频 青青草色爱久久 精品国产自拍 小色狗 琪琪热热色无码 影音先锋大香蕉久草资源 小明视频看看成人免费 俺去了色网婷婷色 久久色情片 超碰在线青青草 超碰视频起碰视频 国产偷拍自拍影音先锋 小明视频看看成人免费 俺去了色网婷婷色 久久色情片 超碰在线青青草 超碰视频起碰视频 国产偷拍自拍影音先锋 老鸭窝在线视频 www.奇米在线四色 老版本日本怡春院 强奸乱伦在线观看 青青草在观视频 色琪琪在线视频原网 欧美色色大香焦 欧美色热图 亚洲香蕉手机在线观看视频 偷拍偷窥自拍网站 超91在线观看 最新奇米奇色777在线 婷婷网站 微拍秒拍福利视频 自拍在线 精品视频 欧美情色无码在线 久草激情视频 午夜高清影院在线观看 第四色青娱乐奇米影视 青青草在线综合 99热这里有精品 自拍偷拍影音先锋 国产自拍 先锋影音 成人在线视频97 久草在线免费观看大香蕉 99er久久国产精品在线 精品国产在线偷拍 啪啪青青草视频 国内偷拍 亚洲 大香蕉成人手机在线 在线伊人大香蕉手机版 久草伊人久草视频 伊人久久青青草综合网 青青草手机在线视频 青青草久久爱大香蕉 国产青青草自拍 伊人大香蕉在线精品 97资源总站久久爱视频 自拍中文字幕 av图片在线看 久草视频福利免费资源站 自拍国产视频在线 www.琪琪色 爱色影爱色搞搞 97资源库 大香蕉在线视频免费观看 a片直播妹子在线视频 a.v在线视频 开心五月色婷婷免费 香蕉福利视频在线观 青青草成人+激情偷拍 青青草视频大香蕉伊人网 av啪啪中文网站 青青草91自拍视频 奇米影视第四色 国产无限制自拍 大香蕉伊人精品在线 久久手机看片国产免费 无码大香蕉网伊人色 亚洲激情色 久草99福利资源 狼人色终合网站 91色国产色去色 2019奇米777奇米网 久久草妹妹色 米奇影院888奇米色 青青青草成人免费现看 超碰自拍 在线99热这里精品 色琪琪永久无码 伊人大香蕉成人视频综合 国产自拍视频在线 大香蕉伊人久操在线 青青草久草热久久草 偷拍自拍第四色 奇米网电影网 超碰99久久天天拍日日操 天天拍天天拍久草片 激情图片,激情小说 青青草久草热久久草 偷拍自拍第四色 奇米网电影网 超碰99久久天天拍日日操 天天拍天天拍久草片 操好屌色 米奇先锋 久草 偷拍 亚洲,偷拍,自拍,精品 伊人大香蕉综合色 大香蕉久久久 成人色啪啪 大香蕉色看片 欧美自拍在线 久久色综合网站xoxo 久热草大香蕉在线视频 久久大香蕉视频网 肏逼免费视频在线 网友自拍偷拍 欧美 国产 奇米影院首页 大香蕉伊人久久爱在线 青青青草免费手机播放 国产青青草 欧美一级黑寡妇夜夜干 啪啪 国产精品 东方aⅴ在线看 手机看A片 777米奇色狠狠俺去啦 香蕉网站伊人中文字幕 久操在线新免费视频 伊人影院在线大香 大香蕉成人伊人在线视频 青青草成人在线视频观看 91国产自拍偷拍视频 青青草色爱久久 精品国产自拍 小色狗 琪琪热热色无码 影音先锋大香蕉久草资源 小明视频看看成人免费 俺去了色网婷婷色 久久色情片 超碰在线青青草 欧美激情图片 自拍超碰 久草视频在线 天天 综合色伊人网 大香蕉视频成人中文网 大香蕉伊人欧美色 久热在线播放中文字幕 青青草久草福利 欧美色色大香焦 欧美色热图 亚洲香蕉手机在线观看视频 偷拍偷窥自拍网站 超91在线观看 最新奇米奇色777在线 婷婷网站 微拍秒拍福利视频 自拍在线 精品视频 欧美情色无码在线 久草激情视频 午夜高清影院在线观看 第四色青娱乐奇米影视 青青草在线综合 99热这里有精品 自拍偷拍影音先锋 国产自拍 先锋影音 成人在线视频97 久草在线免费观看大香蕉 99er久久国产精品在线
    久久草2019在线观看 99这里有精品 大香蕉免费公开青青草 狠狠色丁香婷婷综合 国产久草福利手机在线 青青草黄色三级网站 大香蕉他也啪 青青草视频大香蕉伊人网 久久爱大香焦在线视频 日本有码视频 成人视屏 国产精品91在线 91国产自拍小视频 伊人狼人香蕉网小说 青青草香蕉草久在线 av青青操 亚洲自拍欧美 91 国产 在线 97超碰资源共享 青青草伊人大香蕉 奇米四色网 国産偷拍91 精品国产在线自拍 伊人大香蕉色琪琪影院 caoprom超碰 青青视频在线视频 开心五月婷婷色婷在线 第四色色 Caoprom超碰视频 亚洲图片欧美图色姐 天天干情色网 操妹妹干妹妹 丁香五月婷婷伊人大香蕉 国产精品自拍偷拍在线 青青青成人社区 成人av在线 碰碰视频在线免费播放 影音先锋 小说色 久久草大香蕉 亚洲情色狼人网 思思久久re热线播放 久久草超碰 播播影院私人影院 大香蕉他也啪 米奇影视 成人国产老鸭窝 伊人大香蕉久久天天啪 男人的天堂 国产精品自偷拍 很很鲁在线97