CSS3變形記(上)：變幻無窮的Div

時間 2019-11-19

標籤 css3 css 變形變幻無窮 div 欄目 CSS 简体版

原文原文鏈接

　　傳統上，css就是用來對網頁進行佈局和渲染網頁樣式的。然而，css3的出現完全打破了這一格局。瞭解過css3的人都知道，css3不但能夠對網頁進行佈局和渲染樣式，還能夠繪製一些圖形、對元素進行2D和3D變換。從而能夠替代一些之前必須使用圖片實現的功能，大大加快了網頁的響應速度。例如，css3能夠實現漸變背景、繪製圓角和一些小圖標等！css

　　今天，就來講說如何用css3繪製一些小圖標和css3中的變形。建議用chrome瀏覽器查看,這裏爲了方便你們理解，暫時沒有寫其餘瀏覽器前綴！css3

1、div和css3在一塊兒會發生什麼

　　在沒有css3的時候，div在你們的眼中就是一個四四方方的方框，一個容器，有時候會有一個背景和邊框。因爲背景不在今天的討論範圍以內，那麼，咱們就從邊框提及吧，下面咱們來看看css3中的邊框有哪些特性。chrome

下面，咱們看到的是css3的新特性，就是能夠單獨設置div每條border的樣式，包括width和color。瀏覽器

.box1 {
        width: 100px;
        height: 100px;
        border: 20px solid #333;
        border-left-color:red;
        border-right-color:yellow;
        border-bottom-color:blue;
        border-top-color:green;
    }

上面你看到的不是圖片，這就是由css3渲染出來的效果。下面，咱們來加上border-radius後效果是什麼樣,代碼以下：佈局

.content {
        margin:200px;
        width: 100px;
        height: 100px;
        border: 20px solid #333;
        border-left-color:red;
        border-right-color:yellow;
        border-bottom-color:blue;
        border-top-color:green; border-radius:50%;
    }

是否是很神奇？一個div居然會變成一個圓。這裏border-radius有兩種參數，跟margin和padding相似，可使用px、em等單位，或者使用百分比。後面能夠有4個參數，分別設置四個邊框的radius值。學習

咱們都知道color中有個值是transparent，也就是透明的意思。那麼，元素的邊框顏色爲transparent時，也就意味這邊框變爲透明，不可見了。咱們來看看設置左邊邊框爲透明，效果以下：動畫

    .content {
        margin:200px;
        width: 100px;
        height: 100px;
        border: 20px solid #333;
        border-left-color:transparent;
        border-right-color:yellow;
        border-bottom-color:blue;
        border-top-color:green;
        border-radius:50%;
    }

看到了吧，左邊的紅絲區域消失了~~看到這個想到了什麼？若是咱們所以不想要的邊框，剩下的就是咱們想要的圖形。下面先來看看，若是咱們把div的寬高都設置爲0，並加大border的寬度，會發生什麼，代碼以下：spa

.content {
        margin:200px;
        width: 0px;
        height: 0px;
        border: 100px solid #333;
        border-left-color:red;
        border-right-color:yellow;
        border-bottom-color:blue;
        border-top-color:green;
    }

到這裏，看到了什麼？來數數裏面有幾個三角形，幾個扇形？沒錯，出現了三角形和扇形，就是說咱們能夠經過設置其餘三條邊的顏色位transparent，而後就能獲得三角形和扇形，包括半圓。code

到這裏，有人可能會問：「這裏的三角形不是我想要的，我想要一個等邊三角形，該怎麼辦呢？」（忘了什麼是等邊三角形，本身默默翻開小學數學書看看吧），其實，想獲得等邊三角形，其實就是保證底不變，增長三角形的高度，也就是增長border的寬度了唄！orm

這裏爲了讓你們看到原理，因此不隱藏其餘三邊。代碼以下：

    .content {
        margin:200px;
        width: 00px;
        height: 00px;
        border: 100px solid #333;
        border-top-width:200px;
        border-left-color:red;
        border-right-color:yellow;
        border-bottom-color:blue;
        border-top-color:green;
    }

這裏我增長了top邊的width,我設置成了200px,固然這還不是等邊三角形，等邊三角形邊長200，高爲多少？你們本身算吧~~

同理，咱們也能夠經過改變不一樣的邊的寬度來獲得不一樣的扇形，如銳角、鈍角、直角等，精確到多少度的，本身好好算算吧！

小結：

到了這裏，你應該能用css3畫出三角形、扇形、梯形、實心圓、實心半圓、圓環、半圓環等基本形狀了~~發散你的思惟，還能夠畫出來更多的東西！

2、div + css3圖形進階

　　如今，咱們已經學會了基本圖形的繪製。下面咱們來學習繪製一些複雜的圖形，固然，咱們並無用新的css3數學，仍是以前的border和border-radius。下面，咱們來好好領悟border-radius的威力吧~~

下面，咱們來再熟悉一下border-radius的用法，稍微改動點代碼，以下：

.content {
        margin:200px;
        width: 0px;
        height: 0px;
        border: 100px solid #333;
        border-left-color:red;
        border-right-color:yellow;
        border-bottom-color:blue;
        border-top-color:green;
        border-radius:50% 0 0 0;
    }

咱們能夠看到紅色和綠色產生了特殊的形狀，border-radius後面若是又四個參數的話，就是從左上角開始，依次順時針賦值。下面，咱們來看看橢圓怎麼畫出來，正方形設置圓角能夠獲得圓，同理，若是咱們用長方形的話，咱們就能夠獲得橢圓，代碼以下：

    .content {
        margin:200px;
        width: 200px;
        height: 0px;
        border: 100px solid #333;
        border-left-color:red;
        border-right-color:yellow;
        border-bottom-color:blue;
        border-top-color:green;
        border-radius:50%;
    }

下面咱們來開一下腦洞，若是一條邊的border寬度爲0會怎麼樣呢？例如咱們將左邊的border的寬度設置爲0，css以下：

    .content {
        margin:200px;
        width: 300px;
        height: 100px;
        border: 100px solid #333;
        border-left-width:0;
        border-left-color:red;
        border-right-color:yellow;
        border-bottom-color:blue;
        border-top-color:green;
        border-radius:50%;
    }

那麼若是一邊的值很大呢？其餘的邊都是同樣的，下面咱們來看一個栗子，以下：

.content {
        margin:200px;
        width: 300px;
        height: 100px;
        border: 6px solid #333;
        border-left-width:150px;
        border-radius:20%;
    }

有點像優盤有沒有？固然，若是修改border-radius和border-left的寬度，還能夠作出膠囊。這裏就不作演示了，你們本身動手試試吧！

小結：

用css3繪製的圖形，均可以任意的橫向和縱向拉伸，從而獲得咱們想要的圖形，更加複雜的圖形，咱們要經過多個div來疊加獲得。如咱們常見的關閉圖標，就是三個div疊加獲得的，一個div自己，還有兩個時經過:before和：after.

css3的潛力很大，至於能創造出多麼複雜的畫面，後面還要靠你的藝術造詣了~~ 固然，園子裏面已經有人用css3畫出了阿童木、多啦A夢、小黃人等動畫人物！你們能夠盡情的發揮本身的創造力！

3、css3的2D變形

　　在繪製圖形過程當中，咱們會發現沒法繪製斜線等圖形，由於斜線實際上是經過直線旋轉必定角度獲得的，下面咱們先來看看如何旋轉一個圖形，代碼以下：

<style>
    .content {
        position:absolute;
        margin:200px;
        width: 300px;
        height: 100px;
        border: 6px solid #333;
        border-left-width:150px;
        border-radius:20%;
        font-weight:bold;
        text-align:center;
        font-size:36px;
        line-height:80px;
    }
    .content:nth-child(1){
        transform:rotate(0deg);
    }
    .content:nth-child(2){
        transform:rotate(65deg);
    }
    .content:nth-child(3){
        transform:rotate(130deg);
    }
</style>
<body>
    <div class="content">One</div>
    <div class="content">Two</div>
    <div class="content">Three</div>
</body>

咱們使用transform:rotate(65deg);來進行圖形的旋轉，rotate就是進行2D旋轉的，默認旋轉中心爲div的中心。這裏要注意的是單位爲deg。效果以下：

咱們能夠經過transform-origin來改變旋轉的原點，後面能夠又兩個值，是left,top,right,bottom中的一個,若是隻給了一個值，如top,則會以頂邊的中心進行旋轉，以下是以右邊的中心transform-origin：right;旋轉獲得的圖形：

旋轉很簡單，你們能夠試試，設置旋轉原點和旋轉角度進行旋轉。

下面，關於形變的還有一個比較重要的屬性就是skew,他就是對div作平行轉換，如：咱們對X方向作轉換，效果以下：

<style>
    .content {
        position:absolute;
        margin:500px;
        width: 300px;
        height: 100px;
        border: 6px solid #333;
        font-weight:bold;
        text-align:center;
        font-size:36px;
        line-height:80px;
        transform-origin:right;
    }
    .content:nth-child(1){
        transform:skew(30deg, 0deg);
    }
</style>
<body>
    <div class="content">One</div>
</body>

看到效果了吧，就是拉成平行四邊形了，同理，第二參數，就是在Y軸上面進行拉伸。

關於2D變換，還有兩個方法，分別是平移和放大縮小的，主要用在動畫裏面，用法以下：

translate() 方法

經過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標）和 top（y 座標）

scale() 方法

經過 scale() 方法，元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）

這兩個方法比較簡單，就不寫例子了~~

4、總結

　　經過對div的border、border-radius、border-color、border-widht、width、height等屬性進行設置，咱們能夠獲得不少不一樣的圖形，而後再加上對圖像進行平移、放大、縮小、旋轉等操做，咱們將的到更加豐富的圖形，還能夠作出更多的動畫效果。今天就先寫到這裏了，下一篇將會帶領你們分析一些css3寫的一些小圖標的例子，而後介紹css3中的3D變換，3D變換效果更加的炫~~

做者：雲霏霏

QQ交流羣：243633526

博客地址：http://www.cnblogs.com/yunfeifei/

聲明：本博客原創文字只表明本人工做中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關係。非商業，未受權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。

若是你們感受個人博文對你們有幫助，請推薦支持一把，給我寫做的動力。