前端学习_CSS3_2d转换效果（移动、旋转、缩放）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端学习_CSS3_2d转换效果（移动、旋转、缩放），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3518字，纯文字阅读大概需要6分钟。
内容图文
前端学习——CSS3_2D转换效果
2D转换(transform)
- 2D转换是改变标签在二维平面上的位置和形状
- 移动： translate
- 旋转：rotate
- 缩放： scale
1. 移动 translate 语法
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
- translate`最大的优点就是不影响其他元素的位置
- translate中的100%单位，是相对于本身的宽度和高度来进行计算的
- 行内标签没有效果
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
transform: translate(100px, 100px);
/* 水平移动 100px */
transform: translate(100px, 0)
/* 垂直移动 100px */
transform: translate(0, 100px)
/*水平移动 100px */
transform: translateX(100px);
/* 垂直移动 100px */
transform: translateY(100px)
}
让一个盒子水平垂直居中
transform: translate(-50%,-50%);
2.旋转 rotate 语法
/* 单位是：deg */
transform: rotate(度数)
- 角度为正时顺时针，角度为负时逆时针
- 默认旋转的中心点是元素的中心点
-
代码演示(鼠标放置时旋转360度)
使用过渡方法transition: all 1s;体现旋转360度 否则看不出动画效果
div{
background-color: pink;
width: 50px;
height: 69px;
/* 过渡写到谁身上，谁做动画谁来加 */
transition: all 1s;
}
div:hover{
border: 1px solid brown;
transform: rotate(360deg);
}
2.1 旋转 rotate 实战使用案例之 三角
- 使用div::after在div盒子内容后生成一个只显示两条边框的小div
- 使用 在div::after中使用transform: rotate(45deg);使得旋转成小三角
- 使用子绝父相调整div::after的位置在盒子右边适当位置
- 使用div:hover::after 使得鼠标经过div时内部小三角产生旋转
- 使用transition:all 0.3s ;完成过渡效果
div{
position: relative;
width: 500px;
height: 30px;
border: 1px solid brown;
}
div::after{
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 10px;
right: 15px;
border-right: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
transition:all 0.3s ;
}
div:hover::after{
transform: rotate(-135deg);
}
2.2 旋转 rotate 实战使用改变中心点旋转
-
transform-origin 基础语法
transform-origin: x y; -
重要知识点
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
- 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)
2.2 旋转 rotate 实战 --实战旋转效果案例（常用）
div{
width: 100px;
height:100px;
border: 1px solid black;
//只显示div边框里面内容
overflow: hidden;
}
div::before{
//before与after都需要有content才可以显示内容
content: "哈哈";
background-color: pink;
//display变成块级元素
display: block;
widows: 100%;
height: 100%;
//改变中心点为左下角 旋转一百八十度配合overflow: hidden隐藏
transform-origin: left bottom;
transform: rotate(180deg);
//过渡效果显示
transition: all 0.3s;
}
div:hover::before{
//鼠标经过时回到原本角度
transform: rotate(0deg);
}
2.3 缩放scale
控制元素的放大与缩小
transform: scale(x, y)
-
知识要点
- 注意，x 与 y 之间使用逗号进行分隔
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大transform: scale(2, 2): 宽和高都放大了二倍transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致transform:scale(0.5, 0.5): 缩小- scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
-
代码演示
div:hover { /* 注意，数字是倍数的含义，所以不需要加单位 */ transform: scale(2, 2) /* 实现等比缩放，同时修改宽与高 */ transform: scale(2) /* 小于 1 就等于缩放*/ transform: scale(0.5, 0.5) }
2.4 2D转换综合写法以及顺序问题
-
知识要点
- 同时使用多个转换，其格式为
transform: translate() rotate() scale() - 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 但我们同时有位置或者其他属性的时候，要将位移放到最前面
- 同时使用多个转换，其格式为
-
代码演示
div:hover { transform: translate(200px, 0) rotate(360deg) scale(1.2) }
注：
- transition: all 1s; 过渡效果,过渡写到谁身上，谁做动画谁来加，调节动画效果的时间快慢
- 伪类选择器before ，after需要用content: " "才能显示出内容;
内容总结
以上是互联网集市为您收集整理的前端学习_CSS3_2d转换效果（移动、旋转、缩放）全部内容，希望文章能够帮你解决前端学习_CSS3_2d转换效果（移动、旋转、缩放）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】