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

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/)”

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-11-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DHUtoBUAA

快速排序算法思路分析和C++源代码(递归和非递归)

  快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用,因此很多软件公司的笔试面试...

3497
来自专栏落影的专栏

Metal入门教程总结

本文介绍Metal和Metal Shader Language,以及Metal和OpenGL ES的差异性,也是实现入门教程的心得总结。

3054
来自专栏SeanCheney的专栏

《利用Python进行数据分析·第2版》第12章 pandas高级应用12.1 分类数据12.2 GroupBy高级应用12.3 链式编程技术12.4 总结

前面的章节关注于不同类型的数据规整流程和NumPy、pandas与其它库的特点。随着时间的发展,pandas发展出了更多适合高级用户的功能。本章就要深入学习pa...

4977
来自专栏PPV课数据科学社区

【学习】R语言基础画图

1.plot函数  plot(x,y,xlim=c(0,100),ylim=c(0.4,1), type="o",lwd=2,col=2,pch=24,...

3275
来自专栏calmound

KMP专题

POJ 2406 Power Strings http://poj.org/problem?id=2406 题意:找出s字符窜由多少个重复子窜循环构成 分析:K...

2958
来自专栏窗户

有限域(2)——理想和商环

  我们上一节介绍了环(ring)、域(field)的概念,并给了一些环、域的实例。比如我们知道整数环、方阵环、有理数域、实数域等。我们知道,域是环的一个种。最...

552
来自专栏云霄雨霁

关系代数

1210
来自专栏Pulsar-V

原-图像处理基础(四)DCT变换

Imread()用于读取图片文件中的数据 figure() 控制画图的窗口 imshow() 显示图像 rgb2gray() 把真彩图像转变为灰度图像 d...

3136
来自专栏云端架构

【云端架构】教你口算MD5算法

对MD5算法简要的叙述可以为:MD5以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成...

47114
来自专栏生信宝典

NGS基础 - GTF/GFF文件格式解读和转换

GFF 文件 GFF全称为general feature format,这种格式主要是用来注释基因组。 从 Ensembl 导出的GFF文件示例: X E...

62910

扫码关注云+社区