一、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);垂直 */
原文地址：https://www.cnblogs.com/dhrwawa/p/10534722.html
时间： 2024-08-29 04:26:27