2D转换
转换（trabsform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
一、transform
1-1.2D转换之移动translate
语法：
transform:tanslate(x,y) 移动X轴Y轴的距离
transform:translateX(n) 移动X轴的距离
transform:translateY(n) 移动Y轴的距离
重点：
- 定义2D转换中的移动，沿着 X，Y轴移动元素
- translate最大的优点就是不会影响到其他元素的位置
- translate中百分比单位是相对于自身元素的translate：(50%,50%)
- 对行内标签没有效果
div{
width: 200px;
height: 200px;
background-color: aqua;
/* transform: translate(100px,200px); */
transform: translateX(100px);
transform: translateY(100px);
}
1-2.translate（百分比）盒子居中
<style>
.father{
width: 200px;
height: 200px;
background-color: aqua;
}
.child{
width: 100px;
height: 100px;
background-color: blanchedalmond;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
二、rotate
2-1.旋转效果
<style>
div{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: all .5s;
}
div:hover{
rotate: 360deg;
}
</style>
<body>
<div>1</div>
</body>
2-2.transform–origin设置旋转中心点
transform-origin:x y;
重点
div:hover{
rotate: 360deg;
transform-origin: right bottom;
}
三、2D转换之缩放scale
transform:scale(x,y);
注意
- 属性值用逗号分开
- transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
- transform:scale(2,2) ：宽和高都放大2倍
- transform:scale(1,1) ：只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）
- transform:scale(0.5,0.5) ：缩小
- sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，且不影响其他盒子
div:hover{
rotate: 360deg;
transform-origin: right bottom;
transform: scale(2,2);
}
四、2D转换综合写法
1. 同时使用多个转换，其格式为：transform：translate() rotate() scale()等
2. 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
3. 当我们同时有位移和其他属性的时候，记得要将位移放在最前面
总结
原文地址:https://blog.csdn.net/LQlove1/article/details/128371368
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_40488.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
