亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css3學習之2D轉換功能詳解

  發(fā)布時間：2016-12-23 17:14:33   作者：佚名   我要評論
眾所周知在css3中出現(xiàn)了許多新的特性，其中2D轉換我覺的非常有意思，通過它我們能夠對元素進行移動、縮放、轉動、拉長或者拉伸，所以希望在這里和大家分享一下。有需要的朋友們可以參考借鑒，下面來一起看看吧。

前言

CSS3提供了2D轉換功能，能夠對元素進行移動、縮放和轉動等功能。

2D轉換的屬性名為transform，使用方法為transform:method(value)。

2D轉換方法有translate、scale、rotate、skew、matrix，還有基于這些分支出的translateX、scaleY等。

這里，我將會介紹到以下轉換方法：

  1. translate()
  2. rotate()
  3. scale()
  4. skew() 

首先，我們先插入一個簡單的html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css3的2D轉換</title>
    <style type="text/css">
 
 
        *{
            margin:0;
            padding:0;
        }
 
        #picture{
            width：100%;
            height:500px;
            background:#ccc;
        }
 
        img{
            margin:100px 0 0 100px;
        }
 
 
    </style>
</head>
<body>
 
    <div id="picture">       
            <img src="mary.gif" alt="This is a picture" >
    </div>
     
</body>
</html>

這段代碼我們可以實現(xiàn)在一個div里放一張圖片，通過這張圖片以便于向大家介紹以下方法。

1.translate（）方法：這個方法里可以有兩個參數(shù)，中間用分號隔開，分別表示沿著X軸和Y軸移動的距離，這個距離是相對于該圖片的移動距離，且向右為X軸的正方向，向下為Y軸的正方向。下面的代碼表示將圖片向右移動100px，向下也移動100?！　?/p> 

img{
    margin:100px 0 0 100px;
        transform:translate(100px,100px); 
}

2.rotate()方法：這個方法里有一個參數(shù)，表示要旋轉的度數(shù)，正數(shù)表示順時針旋轉，那么負數(shù)就表示逆時針旋轉了。在要旋轉的度數(shù)后面添加deg （即degree，度數(shù)的意思）。以下代碼表示將圖片順時針旋轉50°。

img{
    margin:100px 0 0 100px;
        transform:rotate(50deg);
｝

3.scale()方法：這個方法里有兩個參數(shù)，沒有單位。分別表示寬度和高度放大或縮小的倍數(shù)，如果大于1表示放大；如果小于一表示縮小。以下代碼表示將圖片的寬度和高度都放大兩倍。

img{
    margin:100px 0 0 100px;
        transform:scale(2,2);
}

4.skew（）方法：有兩個參數(shù)，分別表示沿著X軸和Y軸傾斜轉換，單位同樣是deg，表示角度。這個方法不是很容易理解。首先給出下列代碼：

img{
    margin:100px 0 0 100px;
    transform:skew(20deg,0deg);
｝

表示將圖片沿著x軸逆時針旋轉20度。

這是沒有使用skew（）方法的樣子

這是使用了skew（）方法之后的樣子。

為什么呢？這是因為其x軸和Y軸的方向是這樣的：

當x軸旋轉20°時會將圖片進行逆時針旋轉，但是請注意：這里不是真正意義上的旋轉，而有拉伸傾斜的意思，旋轉之后，它的寬度并沒有改變，并且做一條垂線可以發(fā)現(xiàn)高也是沒有改變的。

對于Y軸方向的旋轉是一樣的：

img{
    margin:100px 0 0 100px;
    transform:skew(0deg,20deg);
｝

上面的代碼表示將圖片沿著Y軸方向旋轉了20°。

旋轉之后，就是下面這樣了：它是沿著順時針方向旋轉的。

如果，我們對x和y軸都旋轉呢？

img{
    margin:100px 0 0 100px;
    transform:skew(20deg,20deg);
｝

那么最終就是綜合作用的效果了，如下圖所示：

說了這么多，大家有沒有發(fā)現(xiàn)我們每次偏移，旋轉，傾斜，放大和縮小是相對于哪個點呢？

如果你稍微細心的話，就會發(fā)現(xiàn)是相對于中心點。這里就要用到tansform-origin屬性了。

即通過這個屬性，我們可以規(guī)定這些方法通過哪一個點作為原點。

首先舉幾個例子。

transform-origin：0 0；表示以左上角為原點。

transform-origin：100% 0；表示以右上角為原點

transform-origin：0 100%；表示以左下角為原點

transform-origin：100% 100%；表示以右下角為原點

于是我們可以得知，這些值的設定是以左上角為基點的，向右為x軸的正方向，向下為y軸的正方向。如果不設定這個屬性，那么默認值為

transform-origin:50% 50%;即以中心作為變換的基點。

最后我還要說一下瀏覽器兼容的問題，為了使代碼能在各個瀏覽器運行成功，我們需要在層疊樣式表中多加幾行代碼，比如說rotate()方法：

transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);  /* Firefox */

這樣，我們就可以在各個主要瀏覽器流暢運行了！

總結

以上就是這篇文章的全部內容了，希望本文的內容對各位學習或者使用CSS3能帶來一定的幫助，如果有疑問大家可以留言交流。

相關文章

  • 利用HTML5+CSS3實現(xiàn)3D轉換效果實例詳解

    對于css的二維世界，相信大家都不陌生。在二維的世界里，我們可以對元素設置寬高、位置、旋轉、背景等等。在css三維世界里，擴展出了一個z軸，這個z軸垂直于屏幕并指向外面
    2017-05-02

  • 用css3實現(xiàn)轉換過渡和動畫效果

    這篇文章主要介紹了用css3實現(xiàn)轉換過渡和動畫效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-13

  • CSS3的RGBA中關于整數(shù)和百分比值的轉換

    這篇文章主要介紹了CSS3的RGBA中關于整數(shù)和百分比值的轉換,同時提到了關于瀏覽器的支持問題,需要的朋友可以參考下
    2015-08-04

  • css3帶你實現(xiàn)3D轉換效果

    這篇文章主要介紹了css3帶你實現(xiàn)3D轉換效果,本篇的3D轉換就是基于原來的2D轉換而來，與2D轉換的功能相似，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
    2022-02-18

最新評論