实践CSS3的2D变换

2016年5月13日
作者： 小卓
所在分类：前端开发
标签: 2D转换, CSS3, 网页
评论数： 还没有评论

CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。转换（transform）是使元素改变形状、尺寸和位置的一种效果，在前端网页中经常会用来实现一些动态特效，来突出网页的特色，增强网页的科技感和趣味性。通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。CSS3的转换根据操作的是平面还是立体空间可分为2D转换和3D转换，本文仅涉及到CSS3的2D转换。

translate() 平移函数

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：
translate()位移函数(px),如果只传一个值,只会在X方向有位移。
translateX()
translateY()

<style>
div{width: 100px;height: 100px;margin: 100px auto;transition: 2s;background: #9BFF67;transform-origin: right bottom;}
div:hover{transform:translate(50px,100px);
</style>
</head>
<body>
<div></div>
</body>

当鼠标悬停在div上，div将从其实位置右移动 50 像素同时向下移动 100 像素；鼠标离开时移回到网页的起始位置。

rotate()旋转函数(deg)

<style>
div{width: 100px;height: 100px;margin: 100px auto;transition: 2s;background: #9BFF67;transform-origin: right bottom;}
div:hover{transform: rotate(360deg);}
</style>
</head>
<body>
<div></div>
</body>

当鼠标悬停在div上，div以右下角为圆心，在网页上旋转360度。

skew(X,Y)倾斜函数(deg)

skewX()
skewY()

<style>
div{width: 100px;height: 100px;margin: 100px auto;transition: 2s;background: #9BFF67;}
div:hover{transform: skewY(-30deg);}
</style>
</head>
<body>
<div></div>
</body>

skewY()竖直方向上有拉伸。skewX()水平方向上有拉伸，skewX(30deg)如下所示：

scale(X,Y)缩放函数(正数、负数和小数),如果只传一个值,会在X,Y方向都缩放。
scaleX()
scaleY()

<style>
.box{width: 100px;height: 100px;background: red;margin:100px auto; transition:all 2s;}
.box:hover{transform: scale(2);}
</style>
</head>
<body>
<div class=“box”></div>
</body>

鼠标悬停在div上，盒子放大2倍。如果换成img，可以做出鼠标悬停，图片放大的效果。如果指定scaleX()或者scaleY()，那么只会在水平或竖直方向，而另一方向保持不变。

matrix() 方法

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

通过矩阵实现各种变换。
matrix(a,b,c,d,e,f)矩阵函数(低版本IE)
默认值：matrix(1,0,0,1,0,0)
通过矩阵实现缩放
x轴缩放 a=x*a;
y轴缩放 d=y*d;
通过矩阵实现位移
x轴位移: e=e+disX
y轴位移: f=f+disY
通过矩阵实现倾斜
x轴倾斜:c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
1、实现缩放

<style>
.box{width: 100px;height: 100px; margin: 100px auto;background: red;transition:1s;}
.box:hover{transform:matrix(2,0,0,2,0,0);}
</style>

2、实现位移

<style>
.box{width: 100px;height: 100px; margin: 100px auto;background: red;transition:1s;}
.box:hover{transform:matrix(1,0,0,1,100,100);}
</style>

3、实现倾斜

<style>
.box{width: 100px;height: 100px; margin: 100px auto;background: red;transition:1s;}
.box:hover{transform:matrix(1,0,0.577,1,0,0);}
</style>

X方向倾斜30°

也可以同时设置a,b,c,d,e,f的值实现缩放，位移和倾斜
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=’auto expand’);
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

<style>
.box{width: 100px;height: 100px; margin: 100px auto;background: red;}
.box:hover{transform:matrix(0.88,0.5,-0.5,0.88,0,0);
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 0.88, M12= -0.5, M21= 0.5 , M22=0.88,SizingMethod=’auto expand’);}
</style>
</head>
<body>
<div class=“box”></div>
</body>
</html>
<script>
console.log(Math.cos(30/180*Math.PI) + “||” + Math.sin(30/180*Math.PI));
</script>