CSS3过渡、变形、动画（二）

一、CSS3的2d变形

我们先来一个小实例感受一下：

 1 nav ul li a:hover {  transform: scale(1.7);  } 

这段规则当鼠标悬停到导航项时会给我们的导航项放大1.7倍：

 

有一点你需要注意的是：

现在如果你尝试在 Safari 浏览器中添加这种规则，须注意它需要应用该规则的原始元素
必须以块状显示。

1 nav ul li a {
2 　　height: 42px;
3 　　text-decoration: none;
4 　　text-transform: uppercase;
5 　　color: black;
6 　　text-shadow: 0 1px 0 hsla(0, 0%, 100%, 1.0);
7 　　font: 1.875em/42px 'BebasNeueRegular';
8 　　display: block;
9 }

不这样做的话，什么效果都没有！

二、在2d下我们能做什么变形？

（1）scale ：用来缩放元素（放大或缩小）
（2）translate ：在屏幕上移动元素（上下左右四个方向）
（3）rotate ：按照一定角度旋转元素（单位为度）
（4）skew ：沿 X和 Y轴对元素进行斜切
（5）matrix ：允许你以像素精度来控制变形效果

下面简单写下用法及效果：

transform: scale(0.5);

transform: translate(40px, 0px);

transform: rotate(90deg)

transform: skew(10deg, 2deg);

 skew （斜切），它会让元素在一个或两个轴上变形偏斜。

第一个参数：X轴方向上的斜切

第二个参数：Y轴方向上的斜切

 

transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);

基本上能让你将若干变形效果（scale、rotate、skew等等）组合成单个声明

 

上面的一些变形还可以配合一些属性来使用：

transform-origin 属性（变形的起点默认是元素的中心点）：

 1 transform: rotate(45deg);

2 transform-origin: 20% 20%; 

 

转载于:https://www.cnblogs.com/lewis-messi/p/8335648.html