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/

声明：本博客原创文字只表明本人工做中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未受权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文链接。

若是你们感受个人博文对你们有帮助，请推荐支持一把，给我写做的动力。