css2D转换(transform)
Posted 冰凉小手
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css2D转换(transform)相关的知识,希望对你有一定的参考价值。
2D转换(transform)
转换可以实现元素的位移、旋转、缩放等效果。可以理解为变形。
结合过渡和hover一起用。
(1)移动translate/translateX/translateY
语法:
transform: translate(x,y);
transform: translateX(x);
transform: translateY(y);
重点
- 沿着X和Y轴移动元素,(x,y)括号内的是终点坐标
- 不会影响其它元素位置
- 百分比单位是相对与自身元素的大小
- 对行内标签没有效果
常用——盒子居中
<div class="box">
<div class="slate"></div>
</div>
.box {
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
background-color: pink;
}
.slate {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
transform: translate(-50%, -50%);
}
(2)旋转
语法:
transform:rotate(45deg);
重点
- rotate里面跟度数,单位deg
- 角度为正,顺时针;负时,逆时针
- 默认旋转中心点是元素中心点
可以用来做小三角
<div></div>
div {
position: relative;
width: 200px;
height: 40px;
margin: 100px auto;
background-color: pink;
}
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);
}
(3)2D转换中心点
语法:
transform-origin: x y;
注意点
- x和y可以跟方位名词或者像素值
- 默认为50% 50%,
- x和y用空格隔开
常用案例
<div></div>
div {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
div::before {
content: \'\';
display: block;
width: 100%;
height: 100%;
background-color: pink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all .4s;
}
div:hover::before {
transform: rotate(0deg);
}
(4)缩放(scale)
语法:
transform:scale(x,y);
注意点
- x与y用逗号分开,不跟单位,倍数(比例)缩放
- transform:scale(1,1); 即:放大一倍,无变化
- transform:scale(2,2); 即:宽高都放大了2倍
- transform:scale(2);相当于transform:scale(2,2);
- transform:scale(0.5,0.5); 即:缩小
- 可以设置缩放中心点,默认中心点,且不影响其他元素
案例
<div><a href=""><img src="../素材/11-风景1.jpeg" alt=""></a></div>
<div><a href=""><img src="../素材/11-风景2.jpeg" alt=""></a></div>
<div><a href=""><img src="../素材/11-风景3.jpeg" alt=""></a></div>
div {
overflow: hidden;
float: left;
width: 400px;
height: 240px;
margin: 10px;
}
div img {
width: 100%;
height: 100%;
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
(4)2D转换综合写法
语法:
transform: translate() rotate() scale()...
注意点
- 同时使用多个转换,其顺序会影响转换的效果(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前(看情况而定)
- 转换是相对与盒子正面而定的,当盒子旋转时,其坐标轴也跟着变化
案例
<div></div>
<div></div>
div {
width: 200px;
height: 200px;
margin: 10px 0;
background-color: pink;
transition: all 4s;
}
div:first-child:hover {
transform: translate(1000px) rotate(30deg);
}
div:last-child:hover {
transform: rotate(30deg) translate(1000px);
}
以上是关于css2D转换(transform)的主要内容,如果未能解决你的问题,请参考以下文章
保姆级解读!CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记