CSS3 转换、文本阴影

突然发现以前的CSS特效用到了很多转换过渡什么的，今天集中来讲一下！

CSS 2D转换

转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 转换来转换您的元素。通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，有以下这些属性：

1. translate() 方法
   通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */

/* 值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素 */

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

transform: rotate(30deg);
/* 值 rotate(30deg) 把元素顺时针旋转 30 度 */

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

transform: scale(2,4);
/* 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍 */

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

transform: skew(30deg,20deg);
/* 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度 */

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

transform:matrix(0.866,0.5,-0.5,0.866,0,0);
/* 使用 matrix 方法将 div 元素旋转 30 度 */

文本阴影

1. text-shadow 可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色，其中水平、垂直阴影可以设置负值。

h1{
text-shadow: 5px 5px 5px #FF0000;
}

原文地址：https://blog.csdn.net/weixin_45277161/article/details/110852678