目录
2D转换
转换(transform)是CS53中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换(lranslorm)你可以简单理解为变形
移动:translate
旋转:rotate
缩放:scale
环保节能
2D 转换之移动 translate
2D移动是2D转换里面的一种功能，可以改变元家在页面中的位置，类似定位
1.语法
transform:translate(x，y);//或者分开写
trangform:translateX(n);
transfoIm:translateY(n);2.重点
- 定义 2D 转换中的移动，沿着X和Y移动元素
- translate最大的优点:不会影响到其他元素的位营
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
2D 转换之旋转 rotate
2D旋转指的是让元素在2维平面内顺时针施·转或者逆时针旋转。
1.语法
transforn:rotate(度数)2.重点
- rotate里面跟度数，单位是deg比rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针默认旋转的
- 中心点是元素的中心点
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2D 转换中心点 transform-origin
我们可以设置元素转换的中心点
1.语法
transforu-origin:x y;2.重点
- 注意后面的参数 x和y用空恪隔开
- xy默认转换的中心点是元聚的中心点(50%50%6)
- 还可以给xy设置 像素 或者 方位名词(top bottom left right center)
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
float: left;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
overflow: hidden;
}
div::before {
content: "黑马";
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.3s;
}
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
2D 转换之缩放scale
缩放，顾名思义，可以放大和缩小， 只要给元素添加上了这个属性就能控制它放大还是缩小。
1.语法
transform:scale(x,y);
2.注意
- 注意其中的x和y用逗号分隔
- transform:scale(1,1):宽和高都放大一倍，相对于没有放大
- transform:scale(2,2):亮和高都放大了2倍
- transformm:scale(2):只写一个参数,第二个参数则和第一个参数一样，相当于 scale(2.2)
- transform:scale(0.5.0.5):缩小
- sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盘子
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all 0.4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div>
<a href="#"><img src="images/scale.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="images/scale.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="images/scale.jpg" alt=""></a>
</div>
</body>
</html>
案例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
2D 转换综合写法
注意:
1.同时使用多个转换，其格式为:transform:translate0rotate0scale0).等
2.其顺序会影转换的教果。(先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前