您的位置：首页 > Web前端 > CSS

CSS3实现2D变换

2016-04-23 15:21 495 查看

CSS2D变换

transform:

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()，那么只会在水平或竖直方向，而另一方向保持不变。

translate()位移函数(px),如果只传一个值,只会在X方向有位移。

translateX()

translateY()

transform简写执行顺序，后写先执行

通过矩阵实现各种变换。

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航