2D 转换
CSS 中的 2D 转换（2D transformations）可以在平面上移动、旋转、缩放和倾斜元素，而无需使用 JavaScript 或其他外部库。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D 转换</title>
<style>
/* 2D 转换，CSS3 中的功能 */
/* 可以实现元素的位移、旋转、倾斜、缩放，可以取代大量之前只能靠 Flash 才可以实现的效果 */
/* 移动：translate(x,y) */
transform: translate(100px,100px);
transform: translate(-50%,-50%); /* 如果 x 和 y 移动 -50%，是指的移动自己盒子宽度的 50%，不是父盒子的 50% */
transform: translateX(50px); /* 仅水平移动50px */
transform: translateY(50px); /* 仅垂直移动50px */
/* 旋转：rotate(deg) */
transform: rotate(45deg); /* 顺时针旋转 45 度 */
transform: rotate(-45deg); /* 逆时针旋转 45 度 */
/* 倾斜：skew(deg,deg) */
transform: skew(30deg); /* 水平倾斜 30 度 */
/* 缩放：scale(x,y) */
transform: scale(0.8,1.1); /* 宽度变为原来的 80%，高度变为原来的 110% */
transform: scale(0.8); /* 宽度变为原来的 80%，高度省略，表示随着宽度自动缩放 */
/* 先移动后缩放 */
transform: translate(100px,100px) scale(1.3);
/* 调整旋转的中心点 */
transform-origin: right bottom; /* 设置旋转中心点为右下角 */
</style>
</head>
<body>
</body>
</html>
