在CSS2.1的时候，页面都是静态了，我们仅仅能通过 hover 这样的伪类来实现简单的动画交互。在CSS3中，很大的一个进步就是能轻松类似于倾斜、缩放、变形、移动和翻转等效果，这些原本是需要借助js和flash等技术来实现的。
CSS3变形能动态控制元素，在屏幕上移动他们，缩小、放大和旋转等。通过CSS变形，不仅能让元素实现静态视觉效果，还可以配合CSS3的transition和动画的keyframe产生一些动画效果
CSS3的变形主要通过 transform 属性来实现，transform属性指一组转换函数，基本语法如下所示：
transform:none | <transform-function> [<transform-function>]*
可以用于内联元素和块级元素，默认值为none，表示元素不变形。另外一个属性值是1至多个变形函数，函数之间用空格隔开。transform-function的常用函数如下所示：
translate() 移动元素，可以根据X和Y轴坐标系来重新定位元素的位置 scale() 放大或缩小元素，接收一个数值参数 rotate() 旋转元素，接收一个角度参数 skew() 让元素倾斜，接收一个角度参数 matrix() 矩阵变形，基于X和Y轴坐标系重新定位元素
下面是这些函数的基本用法示例，基本代码如下:
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<meta charset="utf-8" />
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial;}
.wrap{transition:all 0.5s ease-in-out; width:80px; background:#92B901; color:#fff; text-align:center; padding:10px; border-radius:6px; font-size:18px;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
使用 scale() 函数放大元素：
.wrap:hover{transform:scale(1.4);}
这样元素就能扩大至原来的1.4倍。使用 scale() 函数将元素缩小至原来的0.8倍，如下:
.wrap:hover{transform:scale(0.8);}
时间： 2024-11-05 10:39:18