CSS3-transform-位移、旋转、倾斜、缩放
/*使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。*/
translate(50px,50px);
/*如果只设置了一个值,代表水平方向移动*/
translate(50px)
/*可以设置百分比,移动的距离是相对元素自身的宽度高度百分之多少*/
translate(100%,100%) translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动）
translate(x)水平方向移动(X轴移动）
translateX(x)仅水平方向移动(X轴移动）
translateY(Y)仅垂直方向移动(Y轴移动）案例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
height: 500px;
border:1px solid blue;
margin: 50px auto;
}
.father .son{
width: 100px;
height: 100px;
background: red;
/*过渡属性*/
transition: all 2s;
}
.father:hover .son{
/*移动*/
/*transform: translate(水平位置移动,垂直位置移动);*/
/*translate取值可以是数值也可以百分比,数值要写px,允许负值;百分比也可以负值;百分比是相对自身元素;*/
/*transform: translate(x,y);*/
/*transform: translate(300px,0);*/
/*transform: translate(0,300px);*/
transform: translate(200px,300px);
/*transform: translate(-50px,-30px);*/
/*transform: translate(-50%,0);*/
/*如果transform: translate(一个值)只水平移动*/
/*transform: translate(100px);*/
/*transform: translateX(水平移动位置);*/
/*transform: translateX(100px);*/
/*transform: translateY(垂直移动位置);*/
/*transform: translateY(100px);*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放）
scale(一个值)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放(X轴缩放）
scaleY(y)元素仅垂直方向缩放(Y轴缩放）scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大;
其实可以简单理解成就是把元素的宽度高度变成原来的多少倍,比如scale(0.5,2);就是宽度变成原来的0.5倍,高度变成原来的2倍
案例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
height: 500px;
border:1px solid blue;
margin: 50px auto;
}
.father .son{
width: 100px;
height: 100px;
background: red;
transition: all 2s;
}
.father:hover .son{
/*scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放）*/
/*取值:数值,多少倍,1代表原来宽度与高度;*/
/*transform: scale(宽度,高度)*/
/*宽度变成原来的2倍,高度不变*/
/*transform: scale(2,1);*/
/*高度变成原来的2倍,宽度不变*/
/*transform: scale(1,2);*/
/*宽度缩小50%,高度不变*/
transform: scale(0.5,1);
/*scale(一个值)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放）*/
/*transform: scale(2);*/
/*scaleX(x)元素仅水平方向缩放(X轴缩放）*/
/*transform: scaleX(2);*/
/*scaleY(y)元素仅垂直方向缩放(Y轴缩放）*/
/*transform: scaleY(2);*/
}
</style>
</head>
<body>
<div class="father">
<div class="son">sonsonsosno</div>
</div>
</body>
</html>正值为顺时针，负值为逆时针； 默认以元素的中心点作为原点旋转
案例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
height: 500px;
border:1px solid blue;
margin: 50px auto;
}
.father .son{
width: 200px;
height: 50px;
background: red;
transition: 3s all;
}
.father:hover .son{
/*默认旋转圆点是元素的中心点(垂直水平轴的交界点)*/
/*正值,顺时针旋转*/
/*transform: rotate(360deg);*/
/*负值,逆时针旋转*/
transform: rotate(-360deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">aaaaaaaaa</div>
</div>
</body>
</html>
div{
/* 改变元素原点到左上角，然后进行顺时旋转45度 */
transform-origin: left top;
transform: rotate(45deg);
} 如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素 也可以使用百分比。
div{
/* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */
transform-origin: 10px 10px;
transform: rotate(45deg);
} 案例源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
height: 500px;
border:1px solid blue;
margin: 50px auto;
}
.father .son{
width: 200px;
height: 50px;
background: red;
transition: 3s all;
/*旋转圆点改变为左上角变形*/
/*元素的左上角*/
transform-origin: left top;
/*transform-origin: right top;*/
/*transform-origin: center center;*/
/*transform-origin: 100px top;*/
}
.father:hover .son{
/*默认旋转圆点是元素的中心点(垂直水平轴的交界点)*/
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">aaaaaaaaa</div>
</div>
</body>
</html>第二个参数不写默认为0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
height: 500px;
border:1px solid blue;
margin: 50px auto;
}
.father .son{
width: 100px;
height: 100px;
background: red;
transition: all 2s;
}
.father:hover .son{
/*transform: skew(x,y)*/
/*取值:数值,单位deg度数*/
transform: skew(50deg,0deg);
/*transform: skew(0deg,50deg);*/
/*transform: skew(50deg,50deg);*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
