让元素呈现出“七十二变”的效果，就是这么简单

HTML5学堂

发布于 2018-03-13 15:28:49

1.7K0

发布于 2018-03-13 15:28:49

文章被收录于专栏：HTML5学堂HTML5学堂

HTML5学堂：作为前端开发者，总会在设计图上看到各种各样奇怪的图形，想用图片解决又怕觉得很low，想用其它方法又一下子反应不过来。不管现在的你有没有面对过这样的状态，多做准备总是好的。

本文主要内容

一、CSS3的变形引入

二、二维变形的语法

三、二维变形的常用属性分析

四、二维变形的操作实例

五、总结

一、CSS3的变形引入

在网页设计中，CSS被习惯性的理解为擅长表现静态样式，动态的元素必须借助于javascript才可以实现，而CSS3的出现改变了这一思维方式。CSS3除了增加革命性的创新功能外，还提供了对动画的支持，可以用来实现旋转、缩放、平移、扭曲和过渡效果等等，这些功能再一次证明了CSS3功能的强大和无限潜能。

CSS3实现元素变形的基础来源于新增的transform属性，该属性可用于实现元素的旋转、缩放、平移、扭曲等效果。目前webkit内核支持-webkit-transform私有属性，Mozilla Geckos内核支持-moz-transform私有属性，IE浏览器支持-ms-transform私有属性。

二、二维变形的语法

Transform字面上就是变形、改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和平移translate。下面我们一起来看看CSS3中transform的这些属性具体是如何实现的。老样子，我们仍然从transform的语法开始。

transform的语法

transform ： none | transform-function [ transform-function ]*

也就是：

transform: rotate | scale | skew | translate;

语法分析：

none:表示不进么变换；transform-function表示一个或多个变换函数，以空格分开；换句话说就是我们可以同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种。但这里需要提醒大家，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时只需要用空格隔开。

三、二维变形的常用属性分析

查看常见的二维变形之前，先书写好如下的公共代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS3二维变形</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        /*公共样式代码*/
        .wrap {
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #666;
        }
        .wrap div {
            float: left;
            width: 150px;
            height: 150px;
            margin: 90px 80px 0 80px;
            background: orange;
            line-height: 150px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 案例的结构 -->
    <div class="wrap clearfix">
        <div>HTML5学堂-码匠</div>  
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
    </div>
</body>
</html>

1、旋转rotate

rotate(angle) ：通过指定的角度参数对元素指定一个旋转，旋转之前需先有transform-origin属性的定义（下文讲解）。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如设置transform: rotate(30deg)。

.wrap div:nth-child(1) {
    /*顺时针旋转30度*/
    transform: rotate(30deg);
}

效果如下：

2、平移translate

平移translate可以分为三种情况：

1）translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；

2）translateX(x)仅水平方向移动（X轴移动）；

3）translateY(y)仅垂直方向移动（Y轴移动）。

具体使用方法如下：

translate(x, y) ：通过矢量[x, y]指定一个平移的数值，x是第一个过渡值参数，y 是第二个过渡值参数选项，如果y值未设置，则以0作为其值。当值为负数时，反方向移动物体。其基点默认为元素的中心点，也可以根据transform-origin进行改变基点（下文讲解）。如transform: translate(100px, 20px)。

.wrap div:nth-child(2) {
    /*X轴正方向平移100像素，Y轴正方向平移20像素*/
    transform: translate(100px, 20px);
}

效果如下：

translateX(x) ：通过给定一个X方向上的数值指定一个平移大小。只向x轴进行移动元素，如：transform: translateX(100px)。

.wrap div:nth-child(3) {
    /*只向X轴正方向平移100像素*/
    transform: translateX(100px);
}

效果如下：

translateY(y) ：通过给定一个Y方向上的数值指定一个平移大小。只向y轴进行移动元素，如：transform: translateY(20px)。

.wrap div:nth-child(4) {
    /*只向Y轴正方向平移20像素*/
    transform: translateY(20px);
}

效果如下：

3) 缩放scale

缩放scale和平移translate是极其相似的，它也具有三种情况：

1）scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；

2）scaleX(x)元素仅水平方向缩放（X轴缩放）；

3）scaleY(y)元素仅垂直方向缩放（Y轴缩放）。

它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1，元素就放大，反之其值小于1，元素缩小。因其与平移类似，所以我们主要看下scale(x, y)的使用效果。

scale(x, y])：提供[x, y]两个参数指定一个缩放。如果第二个参数未提供，则取与第一个参数一样的值。

scale(x, y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置（下文讲解）。基中x表示水平方向缩放的倍数，y表示垂直方向的缩放倍数，而y是一个可选参数，如果没有设置y值，则表示x、y两个方向的缩放倍数是一样的，并以x为准。如设置transform: scale(2, 1.5)。

.wrap div:nth-child(5) {
    /*X轴方向扩大2倍，Y轴方向扩大1.5倍*/
    transform: scale(2, 1.5);
}

效果如下：

解释：上图表示的是元素在X轴方向被扩大2倍，在Y轴方向被扩大1.5倍。

4) 扭曲skew

扭曲skew和translate、scale一样具有三种情况：

1）skew(x, y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

2）skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

3）skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。

因为实现方式与平移和缩放一样，所以也只给大家讲解一下skew(x, y)两个方向上的使用情况（单方向上的设置参照平移的书写方式），具体使用如下：

skew(angle [, angle]) ：设置X轴与Y轴上的斜切变换。skew是用来对元素进行扭曲变形，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度，其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置（下文讲解）。如设置transform: skew(30deg, 10deg)。

.wrap div:nth-child(6) {
    /*X轴方向扭曲30度，Y轴方向扭曲10度*/
    transform: skew(30deg, 10deg)
}

效果如下：

5）改变元素基点的transform-origin

前面我们多次提到transform-origin这个东西，它的主要作用就是在进行transform动作之前可以改变元素的基点位置，因为元素默认基点就是其中心位置，换句话说没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate、translate、scale、skew等操作都是以元素自己的中心位置进行变化的。

但有时候我们需要在不同的位置对元素进行这些操作，那么就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在中心位置，以达到需要的基点位置，下面我们主要来看看其使用规则。

transform-origin(x, y)：用来设置元素的运动的基点（参照点），默认点是元素的中心点。其中x和y的值可以是百分值、em、px，其中x也可以是字符参数值left、center、right；y和x一样除了百分值外还可以设置字符参数值top、center、bottom，这样的设置有点像background-position的写法一样。如下：

4、二维变形的操作实例

在上面我们详细介绍了CSS3中transform的各种属性值的设置以及其各自的参数，下面通过一个实例来看看每一种属性值的使用。为了节约空间和大家的时间，我们后面的实例都是在之前那个html基础上实现，主要是我们在下面的菜单中的a:hover中分别使用不同的transform的设置，换句话说，当你鼠标移动到a链接上时，相应的每一个菜单项有不同的变化。具体每一步可以看下面的实例：

基本的结构代码如下：

<div class="menu">
    <ul class="clearfix">
        <li class="item rotate"><a href="#">Rotate</a></li>
        <li class="item translate"><a href="#">Translate</a></li>
        <li class="item translate-x"><a href="#">TranslateX</a></li>
        <li class="item translate-y"><a href="#">TranslateY</a></li>
        <li class="item scale"><a href="#">Scale</a></li>
        <li class="item scale-x"><a href="#">ScaleX</a></li>
        <li class="item scale-y"><a href="#">ScaleY</a></li>
        <li class="item skew"><a href="#">Skew</a></li>
        <li class="item skew-x"><a href="#">SkewX</a></li>
        <li class="item skew-y"><a href="#">SkewY</a></li>
    </ul>
</div>

为了效果更好看一点，给上面的导航菜单加上一点CSS样式。

.wrap .menu {
    width: 100%;
    margin: 100px auto;
    background-color: #fff;
}
.menu ul {
    border-top: 15px solid black;
    padding: 0 10px;
}
.menu ul li a{
    float: left;
    height: 50px;
    width: 65px;
    margin: 0 10px;
    padding: 10px 5px;
    color: #fff;
    background: #151515;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
    text-shadow: 0 1px 1px #686868;
}
.menu ul li.rotate a {
    background: #d50e19;
}
.menu ul li.translate a{
    background: #2ec7d2;
}
.menu ul li.translate-x a {
    background: #8fdd21;
}
.menu ul li.translate-y a {
    background: #f45917;
}
.menu ul li.scale a {
    background: #cdddf2;
}
.menu ul li.scale-x a {
    background: #0fdd21;
}
.menu ul li.scale-y a {
    background: #cd5917;
}
.menu ul li.skew a {
    background: #519;
}
.menu ul li.skew-x a {
    background: #d50;
}
.menu ul li.skew-y a {
    background: #e19;
}

在上面使用了一些前面所讲的CSS3的属性，制作出了一个的比较简洁明亮的导航效果，如下：

从效果图上可以清楚的看到每个菜单上分别对应的是transform中的Rotate、Translate、TranslateX、TranslateY、Scale、ScaleX、ScaleY、Skew、SkewX、SkewY，下面就在相应的a:hover加上各自对应的效果。

.menu ul li.rotate a:hover {
    transform: rotate(45deg);
}
.menu ul li.translate a:hover {
    transform: translate(-10px,-10px);
}
.menu ul li.translate-x a:hover {
    transform: translateX(-10px);
}
.menu ul li.translate-y a:hover {
    transform: translateY(-10px);
}
.menu ul li.scale a:hover {
    transform: scale(0.8,0.8);
}
.menu ul li.scale-x a:hover {
    transform: scaleX(0.8);
}
.menu ul li.scale-y a:hover {
    transform: scaleY(1.2);
}
.menu ul li.skew a:hover {
    transform: skew(45deg,15deg);
}
.menu ul li.skew-x a:hover {
    transform: skewX(-30deg);
}
.menu ul li.skew-y a:hover {
    transform: skewY(30deg);
}

上面的效果都是以元素自身的中心点为基点，只需要使用鼠标进行悬停操作，即可展示出transform中各种相关的风格效果，如图所示：

5. 总结

在上面的实例中，我们的中心点都是元素的中点，大家可以尝试去改变菜单栏中的元素基点，看看可否达到不一样的效果。

本文关于CSS3中的二维变形就介绍完了。最后补充一句，transform的旋转、平移、缩放、扭曲除了单独使用以外，也可以把多个进行组合来使用，只是其属性值之间不能用逗号（“，”）分隔，而必须使用空格分隔。

本文系HTML5学堂独家内容，转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2016-11-24，如有侵权请联系 cloudcommunity@tencent.com 删除

css

html

本文分享自懂点君微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

html

登录后参与评论

0 条评论

热度