一、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);垂直 */