css3变换效果

1 css3变换效果

转换是使元素改变形状、尺寸和位置的一种效果。分为2D变换和3D变换。

1.1 2D 转换

css3提供的2D变换有如下几种，这几种效果都是通过transform属性来调用完成的。

translate()
rotate()
scale()
skew()
matrix()

translate() 方法

translate是一种平移效果，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数。

<!DOCTYPE html>
<html>
    <head>
        <style> 
            div
            {
                width:100px;
                height:75px;
                background-color:red;
                border:1px solid black;
            }
            div#div2
            {
                transform:translate(50px,100px);
            }
        </style>
    </head>
    <body>
        <div>你好。这是一个 div 元素。</div>
        <div id="div2">你好。这是一个 div 元素。</div>
    </body>
</html>

运行效果如图

rotate() 方法

rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

<!DOCTYPE html>
<html>
<head>
    <style> 
        div
        {
            width:100px;
            height:75px;
            background-color:yellow;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotate(30deg);
        }
        div#div3
        {
            transform:rotate(-30deg);
        }
    </style>
</head>
<body>
    <div>你好。这是一个 div 元素。</div>
    <div id="div2">你好。这是一个 div 元素。</div>
    <div id="div3">你好。这是一个 div 元素。</div>
</body>
</html>

运行效果如图

scale() 方法

scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

<!DOCTYPE html>
<html>
<head>
    <style> 
        div
        {
            width:100px;
            height:75px;
            background-color:yellow;
            border:1px solid black;
        }
        div#div2
        {
            margin:100px;
            transform:scale(2,4);
        }
        div#div3
        {
            margin:100px;
            transform:scale(.5);
        }
    </style>
</head>
<body>
    <div>你好。这是一个 div 元素。</div>
    <div id="div2">你好。这是一个 div 元素。</div>
    <div id="div3">你好。这是一个 div 元素。</div>
</body>
</html>

运行效果如图

skew() 方法

skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

<!DOCTYPE html>
<html>
<head>
    <style> 
        div
        {
            width:100px;
            height:75px;
            background-color:yellow;
            border:1px solid black;
        }
        div#div2
        {
            transform: skew(30deg,20deg);
        }
    </style>
</head>
<body>
    <div>你好。这是一个 div 元素。</div>
    <div id="div2">你好。这是一个 div 元素。</div>
    <div id="div3">你好。这是一个 div 元素。</div>
</body>
</html>

运行效果如图

matrix() 方法

matrix() 方法，法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

<!DOCTYPE html>
<html>
<head>
    <style> 
        div
        {
            width:100px;
            height:75px;
            background-color:yellow;
            border:1px solid black;
        }
        div#div2
        {
            transform:matrix(0.866,0.5,-0.5,0.866,0,0);
        }
    </style>
</head>
<body>
    <div>你好。这是一个 div 元素。</div>
    <div id="div2">你好。这是一个 div 元素。</div>
    <div id="div3">你好。这是一个 div 元素。</div>
</body>
</html>

运行效果如图

1.2 2D transform 方法

当然也可以按照下表4-3显示设置。

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

1.3 3D transform 方法

CSS3 可以使用 3D 转换来对元素进行展示，2D主要基于平面变换，而3D主要基于空间变换，3D动画必须是三维空间，也就是说2D是平面坐标轴（x、y），而3D必须是空间坐标轴（x、y、z），形成立体几何坐标轴才可以，因此3D的API都是存在轴的概念，如rotateX，表示X轴旋转，即以横向作为参考，做向前或者向后的立体翻转。

rotateX()方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。一般要求制定参考的边（transform-origin属性来决定）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>3D测试案例</title> 
    <style> 
        div
        {
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateX(50deg);
            -webkit-transform:rotateX(50deg); 
        }
    </style>
</head>
<body>
    <div>这个是一个div</div>
    <div id="div2">这个是第二个div</div>
</body>
</html>

运行结果如图

rotateY() 方法

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
    -moz-transform: rotateY(130deg);	/* Firefox */
}

转换属性

表格列出了所有的转换属性。

属性	描述	值
transform	向元素应用 2D 或 3D 转换	各种不同的函数
transform-origin	允许你改变被转换元素的位置（参考点或者边）	left、center、right、length、%
transform-style	规定被嵌套元素如何在 3D 空间中显示	flat、preserve-3d
perspective	规定 3D 元素的透视效果（视距）	数值
perspective-origin	规定 3D 元素的底部位置	perspective-origin: x-axis y-axis
backface-visibility	定义元素在不面对屏幕时是否可见	visible、hidden

3D transform 方法

表所示

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

2 css3过渡效果

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：

1、规定希望把效果添加到哪个 CSS 属性上

2、规定效果的时长

3、效果触发时间（如鼠标hover等）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css过渡效果</title>
	<style>
		.box {
			width: 300px;
			height: 300px;
			border: 1px solid red;
			background: yellow;
		}
		div {
            /* 宽度在2秒内过渡 */
		    transition: width 2s;
		    -moz-transition: width 2s;	/* Firefox 4 */
		    -webkit-transition: width 2s;	/* Safari 和 Chrome */
		    -o-transition: width 2s;	/* Opera */
		}
		div:hover {
			width: 500px;
			background: #ff0000;
		}
	</style>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

多项改变

也可以同时制定多个属性过渡，请添加多个属性，由逗号隔开。

div
{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s, height 2s, transform 2s;
    -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
    -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
    width:200px;
    height:200px;
    transform:rotate(180deg);
    -moz-transform:rotate(180deg); /* Firefox 4 */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
    -o-transform:rotate(180deg); /* Opera */
}

过渡属性

属性	描述	值
transition	简写属性，用于在一个属性中设置四个过渡属性。	属性对
transition-property	规定应用过渡的 CSS 属性的名称。	属性名称
transition-duration	定义过渡效果花费的时间。默认是 0。	数值（单位：秒）
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	linear、ease、ease-in等
transition-delay	规定过渡效果何时开始。默认是 0。	数值（单位：秒）

div
{
    transition: width 1s linear 2s;
}
.box {
	transition: a 1s linear 2s;
}

在使用css完成这种网页效果的时候，一般是过渡（transition）配合css属性或者变换（transform）来完成各种效果。

3 css3动画效果

css3也提供基于css的动画效果，这种效果可以取代动画图片、Flash 动画以及 JavaScript。

在css中，@keyframes规则可以使用来创建动画，创建动画是通过逐步改变从一个CSS样式到另一个CSS样式，在动画过程中，您可以更改CSS样式的设定多次，指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同，0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

@keyframes规则是css3中新增规则，目前主流浏览器都支持该规则（加浏览器对应的前缀），但不兼容IE 9以及更早版本的浏览器。

@keyframes规则语法格式
@keyframes animationname { keyframes-selector {css-styles;} };

animationname：定义animation的名称；

keyframes-selector：动画持续时间的百分比，可能的值：0-100%、from (和0%相同)、to (和100%相同)。您可以用一个动画keyframes-selectors；

css-styles ：一个或多个合法的CSS样式属性；

@keyframes myAnimation
{
    from {
    	background: red;
    }
    to {
    	background: yellow;
    }
}

@-moz-keyframes myfirst /* Firefox */
{
    from {background: red;}
    to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation: myfirst 5s;
    -moz-animation: myfirst 5s;	/* Firefox */
    -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
    -o-animation: myfirst 5s;	/* Opera */
}

如果只是指定了开始和结束不够用，想更详细的指定效果变化，可以通过百分比来完成动画效果的设置。

@keyframes myfirst {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	值
@keyframes	规定动画。指定	css样式
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	动画名称
animation-name	规定 @keyframes 动画的名称。	动画名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	数值
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	ease-in-out、linear、ease、ease-in、ease-out
animation-delay	规定动画何时开始。默认是 0。	数值
animation-iteration-count	规定动画被播放的次数。默认是 1。	数值或者infinite
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	normal、alternate
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	paused、running
animation-fill-mode	规定对象动画时间之外的状态。	none、forwards、backwards、both

/* 一个一个独立指定 */
div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

当然也可以一次就指定

div
{
	animation: myfirst 5s linear 2s infinite alternate;
}

4 css3其他效果

当然css3提供的功能非常强大，不仅仅只有这些基本的操作，还有其他大量的功能。

4.1 渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>css3其他特效</title> 
    <style>
        #box {
            height: 200px;
            background-color: red; /* 浏览器不支持时显示 */
            background-image: linear-gradient(#e66465, #9198e5);
        }
    </style>
</head>
<body>

    <h3>线性渐变 - 从上到下</h3>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

    <div id="box"></div>
</body>
</html>

运行效果如下图：

/* 线性渐变 - 从上到下（默认情况下） */
#box {
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(#e66465, #9198e5);
}

/* 线性渐变 - 从左到右 */
#box {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

/* 线性渐变 - 从右到左 */
#box {
  height: 200px;
  background-image: linear-gradient(to left, red , yellow);
}

/* 线性渐变 - 对角 */
#box {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

/* 线性渐变 - 带有指定的角度的线性渐变 */
#box {
  background-image: linear-gradient(-90deg, red, yellow);
}

/* 线性渐变 - 设置多个颜色结点 */
#box {
  background-image: linear-gradient(red, yellow, green);
}
#box {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet););
}

#box{
  /* 线性渐变 - 带有透明度 */
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

/* 线性渐变 - 重复的线性渐变 */
#box {
  height: 200px;
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
}
#box {
  height: 200px;
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); 
}
#box {
  height: 200px;
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); 
}
#box {
  height: 200px;
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%); 
}

#box {
  /* 径向渐变 */
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red, green, blue); 
}
#box {
  /* 径向渐变 */
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red, yellow, green);
}

4.2 CSS3 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局。

column-count

column-count 属性指定了需要分割的列数。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>css多列分布</title> 
	<style> 
		.box {
			column-count:3;
		}
	</style>
</head>
<body>
	<h1>下面的数据呈现3列展示</h1>
	<div class="box">
		“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
	</div>
</body>
</html>

代码运行结果如图

column-gap 属性指定了列与列间的间隙。
column-rule-style 属性指定了列与列间的边框样式
column-rule-width 属性指定了两列的边框厚度
column-rule-color 属性指定了两列的边框颜色
column-rule 属性是 column-rule-* 所有属性的简写

当然也不止有这些，表所示

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	设置 column-width 和 column-count 的简写

4.3 字体图标icon

我们在页面开发的时候，经常需要在页面上显示一些小图标，也有不少icon图标库可供我们使用，现在主流的图标实现有如下几种方式。

image （小图标直接使用）
CSS Sprites （精灵图、雪碧图）
Icon Font（字体图标）
SVG 图标
CSS手写icon（太麻烦，而且自己做往往不好看，不太建议）

4.3.1 使用 image 实现

就是使用img标签引入小图标的图片即可。

注意：img 的大小设置、可以只设置宽度／高度，图片会自适应缩放、img 的 vertical-align

缺点：请求数过多

4.3.2 CSS Sprites

CSS Sprites，css精灵图，又叫做雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。当访问该页面时，载入的图片就不会像以前那样一幅一幅地显示出来了。

很明显是针对img直接引入图片的优化，这样可以将多达几十上百的图标放在一个图片上，减少HTTP的访问次数，但是也存在缺点。

缺点1：生成时需要预留下对应的空间，以便于分割显示图片（当然现在有这样的插件工具）。

缺点2：发的时候比较麻烦，你要通过工具测量计算每一个背景单元的精确位置，没什么难度，但是很繁琐。

缺点3：维护成本较高。

4.3.3 SVG图标

svg 可以作为图像的地址直接传入：<img src="img/xx.svg">，但是这样依然会造成请求数过多* 还可以使用 SVG 精灵图，如果要制作SVG的精灵图，一般建议使用谷歌的开源工具：

npm svg sprites，看排名靠前的，比如 svg-sprite。

当然你也可以之间使用html5提供的svg标签，如：

<!DOCTYPE html>
<html>
<body>

<h1>svg标签的使用</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
</body>
</html>

运行结果如图4-19所示。

4.3.4 CSS手写icon

css可以画画的，那么我们完全可以使用css完成图标的绘制。参考网站：CSS ICON

4.3.5 字体图标（推荐）

现在随着技术的发展，大家都慢慢的推荐使用字体图标这种方式，也就是我们通过一些技术，将图标设置到字体文件上，如svg、png、jpg等图片都可以，之后使用字体完成设置。

国内推荐使用阿里巴巴的矢量图标库：阿里巴巴官方矢量图标库

国外的话，推荐使用Awesome：FontAwesome，当然它也的中文网也相对不错 Font Awesome中文网。

5 CSS变量

2017年三月，微软宣布 Edge 浏览器将支持 CSS 变量，这样一来，这个重要的 CSS 新功能，所有主要浏览器已经都支持了。

5.1变量的声明

声明变量的时候，变量名前面要加两根连词线（--），如：

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

上面代码中，body选择器里面声明了两个变量：--foo和--bar。

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。

为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

5.2怎么使用CSS变量

var()函数用于读取变量。如：

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值

color: var(--foo, #7F583F);

第二个参数不处理内部的逗号或空格，都视作参数的一部分

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明。

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

注意，变量值只能用作属性值，不能用作属性名。

.foo {
  --side: margin-top;
  /* 无效 变量--side用作属性名，这是无效的 */
  var(--side): 20px;
}

5.3变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接

--bar: 'hello';
--foo: var(--bar)' world';

如果变量值是数值，不能与数值单位直接连用。

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位，就不能写成字符串

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

6 常见的css函数

函数	描述	CSS 版本
attr()	返回选择元素的属性值。	2
calc()	允许计算 CSS 的属性值，比如动态计算长度值。	3
cubic-bezier()	定义了一个贝塞尔曲线(Cubic Bezier)。	3
hsl()	使用色相、饱和度、亮度来定义颜色。	3
hsla()	使用色相、饱和度、亮度、透明度来定义颜色。	3
linear-gradient()	创建一个线性渐变的图像	3
radial-gradient()	用径向渐变创建图像。	3
repeating-linear-gradient()	用重复的线性渐变创建图像。	3
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像。	3
rgb()	使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。	2
rgba()	使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。	3
var()	用于插入自定义的属性值。	3

7 常见的CSS单位和倒影

rem

……

/*  倒影效果   */
-webkit-box-reflect: below 2px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));