CSS3变形transform属性
上篇文章分享了使用圆角边框属性制作饼环和四边不同色的正方形，今天分享加上CSS3的`变形
transform属性`做一个由八个同色的三角形组成的正方形。
CSS3动画相关的第二个属性就是transform,翻译成中文是“改变，使…变彩;转换”，CSS3
transform属性允许我们对元素进行旋转、缩放、移动或倾斜，向元素应用2D或3D转换。
tanton性的基本语法：
transform：none | transform-funetions;
在上面的语法中，transform属性的默认值为none,适用于内联元素和块元素，表示不进行变形。
transform-functions 用于设置变形函数，可以是一个或多个变形函数列表。
2D 转换的常用函数
| 函数名 | 描述 | 参数说明 |
|---|---|---|
| rotate(angel) | 旋转元素 | angel是度数值，代表旋转角度 |
| skew(x- angel,y- angel) | 倾斜元素 | angel是度数值，代表倾斜角度 |
| skewX(angel) | 沿着x轴倾斜元素 | angel是度数值，代表倾斜角度 |
| skewY(angel) | 沿着y轴倾斜元素 | angel是度数值，代表倾斜角度 |
| scale(x，y) | 缩放元素，改变元素的高度和宽度 | 代表缩放比例，取值包括正数、负数和小数 |
| scaleX(x) | 改变元素的宽度 | 代表缩放比例，取值包括正数、负数和小数 |
| scaleY(y) | 改变元素的高度 | 代表缩放比例，取值包括正数、负数和小数 |
| translate(x,y) | 移动元索对象，基于x和y坐标重新定位元素 | 元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之使用正数 |
| translateX(x) | 沿着x轴移动元素 | 元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之使用正数 |
| translateY(y) | 沿着y轴移动元素 | 元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之使用正数 |
| matrix(n,n,n,n,.n,n) | 2D转换矩阵 | 使用6个值的表示变形，所有变形的本质都是由矩阵完成的 |
接下来看看实例
制作图案由多种方法，先看看方法一，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多色正方形1</title>
<style>
//方法一
.lingxing {
height:0;
width:0;
margin:80px 0px 0px 120px;
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transfo
最低0.47元/天 解锁文章
3523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
