一、2D变形
1、变形
transform:translate();translateX();translateY();translate(,);
2、过渡
transition:all 1s;
二、具体体现的例子
1、位移的实例
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>css3的2D变形</title> ???<style> ???div{ ???????width: 100px; ???????height:100px; ???????background-color: skyblue; ???} ???div:active{ ???????/* transform: translate(100px);写一个值：只有水平位移 */ ???????/* transform: translate(100px,200px);写两个值，一个水平一个竖直 */ ???????/* transform: translateX(100px);水平位移 */ ???????/* transform: translateY(100px);垂直位移 */ ???????/* 另外这里也可以写百分比，而这个百分比的参照物是自身 */ ???} ???</style></head><body> ???<div></div></body></html>2、缩放
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>css3的2D变形</title> ???<style> ???div{ ???????width: 100px; ???????height:100px; ???????background-color: skyblue; ???????/* 让所有元素的变化到时在1秒钟缓步进行 */ ???????transition: all 1s; ???} ???div:active{ ???????/* 位移 */ ???????/* transform: translate(100px);写一个值：只有水平位移 */ ???????/* transform: translate(100px,200px);写两个值，一个水平一个竖直 */ ???????/* transform: translateX(100px);水平位移 */ ???????/* transform: translateY(100px);垂直位移 */ ???????/* 另外这里也可以写百分比，而这个百分比的参照物是自身 */ ???????/* 缩放 */ ???????/* transform: scale(1.2);相对于自身的1.2倍 宽高*/ ???????/* transform: scaleX(1.2);宽度相对于自身的1.2倍 */ ???????/* transform: scaleY(1.2);高度相对于自身的1.2倍 */ ???????} ???</style></head><body> ???<div></div></body></html>3、旋转
/* 旋转 */ ???????/* transform-origin: center; */ ???????/* 这里是默认的旋转参考点 ，还可以自行设置像素值，百分比等*/ ???????/* transform: rotate(-90deg);正负值代表旋转的方向 */
4、倾斜
/* 倾斜 */ ???????/* transform: skew(90deg,0);水平垂直 */ ???????/* transform: skewX(60deg);水平 */ ???????/* transform: skewY(60deg);垂直 */
css3的2D变形
原文地址：https://www.cnblogs.com/dhrwawa/p/10534722.html