css 2D转换

转换(transorm)是css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。

1.移动:translate
语法:
复制代码
transform:translate(x,y)或者分开写
transform:translateX(n)
​transform:translateY(n)
优点:

1.定义2D转换中的移动,沿着x和y轴移动元素

2.translate最大的优点:不会影响到其它元素的位置

3.translate中的百分比单位是相对于自身元素(宽度或高度)的translate:(50%,50%)

4.对行内标签没有效果

2.旋转:rotate

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。

语法:

transform:rotate(度数)

重点:

1.rotate里面跟度数,单位是deg 比如 rotate(45deg)

2.度数为正时,顺时针,负时,为逆时针

3.默认旋转的中心点是元素的中心点

2D转换中心点transform-origin

可以设置元素转换的中心点

语法:
复制代码
transform-origin: x y;
重点:

1.注意后面的参数x和y用空格隔开

2.xy默认转换的中心点是元素的中心点(50% 50%)

3.还可以给x y设置 像素 或者 方位名词 (top bottom left right center)

3.缩放:scale
语法:

transform:scale(x,y)

注意:

1.注意其中的x和y用逗号分隔

2.transform:scale(1,1):宽和高都放大一倍,相对于没有放大

3.transform:scale(2,2):宽和高都放大了2倍

4.transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)

5.ransform:scale(0.5,0.5):缩小

6.sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其它盒子

2D转换综合写法

注意:

1.同时使用多个转换,其格式为:transform:translate() rotate() scale()...等

2.其顺序会影响转换效果。(先旋转会改变坐标轴方向)

3.当我们同时有位移和其它属性的时候,记得要将位移放到最前

相关推荐
y先森23 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy24 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891127 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端