CSS笔记(24)之transform
关于HTML+CSS的基础班知识已经学完啦,现在学习就业班的知识.
2D转换
转换(transform)是CSS3中最具有颠覆性的特征之一,可以实现元素的位移/旋转/缩放等效果.转换可以简单理解为变形.
- 移动:translate
- 旋转:rotate
- 缩放:scale
二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系.
2D转换之移动translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位.
语法:
transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);
举个栗子(又换了vscode主题嘻嘻):
坐标轴和我们数学学的不太一样,主要是方向上的问题,这里以右和下为正方向.
重点:
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate最大的优点:不会影响到其他的元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);也就是说,假如盒子的宽度为100px,那么translateX(50%)就会往x轴移动50px.
- 对行内标签没有效果
2D转换之rotate
2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转.
语法:
transform: rotate(度数deg);
重点
- rotate里面跟度数,单位是deg(degree的缩写).
- 角度为正时,顺时针.反之为逆时针.
- 默认旋转的中心点是元素的中心点.
配合着过渡,做了一个风扇的效果:
<style>
img {
width: 100px;
border-radius: 50%;
transition: 5s all ease-in;
}
img:hover {
transform: rotate(9999deg);
}
</style>
</head>
<body>
<img src="../images/fan.jpg" alt="">
</body>我们经常会看见小箭头,我们之前用的都是字体图标,现在我们可以利用旋转把他做出来啦.这个也可以做成动画的效果.
<style>
.box {
position: relative;
width: 200px;
height: 25px;
border: 1px solid #000;
}
.box::after {
content: '';
position: absolute;
top: 5px;
right: 10px;
width: 10px;
height: 10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
当然,旋转中心点也是可以变化的.
2D旋转中心点transform-origin
我们可以设置元素旋转的中心点
语法:
transform-origin: x y;
重点:
- 注意后面的参数x和y用空格隔开.
- x y默认转换的中心点是元素的中心点(50% 50%).
- 还可以给x y设置像素或者方位名词.
嘿嘿,又做了一个过渡效果的.
2D转换之缩放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的最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子.
当然,这个也能设置缩放的中心点,和前面的方法是一样的.
2D转换综合写法
注意:
- 同时使用多个转换,其格式为:transform:translate( ) rotate( ) scale( )..
- 其顺序会影响转换的效果.(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性时,记得要将位移放在最前面
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-09-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
