<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.box,.box1{
width: 200px;
height: 100px;
border:1px solid red;
margin: 200px;
display: inline-block;
position: absolute;
}
.box1{
/*拉伸 skew(x,y)*/
transform: skew(30deg,30deg);
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
transform:
这是最主要的变换属性;其实所有变换都是通过这个属性,使用不同的值来实现的。
而所用不同的值,主要就是指定不同的变换函数(一个单词),以及所需要变换的数值;
常用2D变换函数如下:
transform: translatex(值): 将元素水平移动给定的值;
- transform: translatey(值): 将元素垂直移动给定的值;
- transform: translate(x值,y值): 同时进行水平和垂直移动,比如:translate(15px, 20px)
- transform: rotate(角度值): 将元素旋转给定的角度,比如:30deg
- 旋转的方向是:正值为顺时针方向,负值为逆时针方向;
- transform: scalex(比例值): x方向进行缩放;
- transform: scaley(比例值): y方向进行缩放;
- transform: scale(x比值, y比值): 同时进行水平和垂直方向的缩放,scale(1.5, 2)
- transform: skewx(角度值): 将元素从x方向拉伸给定的角度;
- transform: skewy(角度值): 将元素从y方向拉伸给定的角度;
- transform: skew(x角度,y角度): 将元素从x和y方向拉伸给定的角度;
特别注意:
1,对一个元素可以同时进行多项变换。
2,进行多项变换时,多个变换属性值要一并写在一起,相互之间用空格隔开,类似这样:
transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2);
扫描二维码关注公众号,回复:
6070658 查看本文章
- 对于进行了变换的元素,虽然形状或位置都可能变了,但并不影响其他元素(即不影响布局效果)。
- 对于多项变换,即使每项设定的参数一样,但也可能会因为变换的顺序而最终表现不同。
- transform-origin:
指定变换时的“原点”(基点);默认是该变换元素的“中心点”(center, center);形式:
transform-origin:水平坐标 垂直坐标;
其中: 水平坐标可以用一个长度值,或百分比,或left,center,right;
垂直坐标可以用一个长度值,或百分比,或top,center,bottom;