<!--
一、转换
转换是指元素改变形状、尺寸和位置的一种效果，又称为变形，可以向元素应用2D或3D转换，从而对元素进行旋转、缩放、移动或倾斜；2D转换是元素在x轴和y轴平面上发生变化，改变其形状、尺寸和位置，3D转换指元素可以在Z轴发生变化。
transform属性用来对元素进行转换，其语法为：
transform:none/function;function指的是转换函数，可以是一个或者多个，函数之间用空格隔开，如果想要对一个元素实现多种转换，必须将对应的函数写在一个transform中。
转换的原点
transform-origin属性用来指定元素转换的原点位置，默认情况下是元素的中心，其取值可以为数值、百分比和关键字，其语法为：
transform-origin:value；
transform-origin:value1 value2;
当取一个值时，应用所有轴的位置，两个值表示x/y，三个值表示x/y/z
二、2D转换
1、2D位移
位移：指元素在x轴或y轴平移。
translate()方法用于将元素从当前位置移动到某位置，语法为：
transform:translate(value);元素沿x轴移动
transform:translate(value1,value2);元素沿着x轴和y轴移动，可以取值为数值和百分比，也可以是负值，也可以使用单向位移函数：translateX或translateY；
2、2D缩放
scale()方法用于改变元素的尺寸，其语法为：
transform:scale(x)或者scale(x,y);一个参数时，第二个参数与第一个相等，两个参数时，表示x轴和y轴缩放，取值为0~1时，表示缩小，大于1时表示放大，也可以使用单向缩放scaleX和scaleY
3、2D旋转
rotate()方法用于旋转元素，根据原点按照顺时针旋转给定的角度，允许负值，此时表示逆时针，其语法为：
transform:rotate（deg）;
4、2D倾斜
skew()方法用于让元素倾斜，围绕着x轴和y轴进行一定角度的倾斜，可能会改变元素的形状，其语法为：
transform:skew(x)或skew(x,y);取一个值时是沿着x轴倾斜；其取值为角度，也可以使用单向函数，skewX和skewY。
-->
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid black;
background: gray;
}
#div1{
transform:rotate(90deg) scale(0.5);
}
#div2{
transform:translate(30px,40px);
transform:translateX(40px);
transform:translateY(10px);
}
#div3{
margin-top: 40px;
transform:scale(0.5,1.3);
transform:rotate(30deg);
transform-origin:right top;
}
#div4{
margin-left: 50px;
transform:skewY(45deg);
transform-origin:right top;
}
</style>
</head>
<body>
<div id="div1">123</div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
一、转换
转换是指元素改变形状、尺寸和位置的一种效果，又称为变形，可以向元素应用2D或3D转换，从而对元素进行旋转、缩放、移动或倾斜；2D转换是元素在x轴和y轴平面上发生变化，改变其形状、尺寸和位置，3D转换指元素可以在Z轴发生变化。
transform属性用来对元素进行转换，其语法为：
transform:none/function;function指的是转换函数，可以是一个或者多个，函数之间用空格隔开，如果想要对一个元素实现多种转换，必须将对应的函数写在一个transform中。
转换的原点
transform-origin属性用来指定元素转换的原点位置，默认情况下是元素的中心，其取值可以为数值、百分比和关键字，其语法为：
transform-origin:value；
transform-origin:value1 value2;
当取一个值时，应用所有轴的位置，两个值表示x/y，三个值表示x/y/z
二、2D转换
1、2D位移
位移：指元素在x轴或y轴平移。
translate()方法用于将元素从当前位置移动到某位置，语法为：
transform:translate(value);元素沿x轴移动
transform:translate(value1,value2);元素沿着x轴和y轴移动，可以取值为数值和百分比，也可以是负值，也可以使用单向位移函数：translateX或translateY；
2、2D缩放
scale()方法用于改变元素的尺寸，其语法为：
transform:scale(x)或者scale(x,y);一个参数时，第二个参数与第一个相等，两个参数时，表示x轴和y轴缩放，取值为0~1时，表示缩小，大于1时表示放大，也可以使用单向缩放scaleX和scaleY
3、2D旋转
rotate()方法用于旋转元素，根据原点按照顺时针旋转给定的角度，允许负值，此时表示逆时针，其语法为：
transform:rotate（deg）;
4、2D倾斜
skew()方法用于让元素倾斜，围绕着x轴和y轴进行一定角度的倾斜，可能会改变元素的形状，其语法为：
transform:skew(x)或skew(x,y);取一个值时是沿着x轴倾斜；其取值为角度，也可以使用单向函数，skewX和skewY。
-->
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid black;
background: gray;
}
#div1{
transform:rotate(90deg) scale(0.5);
}
#div2{
transform:translate(30px,40px);
transform:translateX(40px);
transform:translateY(10px);
}
#div3{
margin-top: 40px;
transform:scale(0.5,1.3);
transform:rotate(30deg);
transform-origin:right top;
}
#div4{
margin-left: 50px;
transform:skewY(45deg);
transform-origin:right top;
}
</style>
</head>
<body>
<div id="div1">123</div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
3932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
