<!--
一、转换
转换是指元素改变形状、尺寸和位置的一种效果,又称为变形,可以向元素应用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>