文章目录

• 1.2D转换
• • • 1.1移动translate
    • 1.2旋转rotate
    • 1.3旋转中心点transform-origin
• 2.缩放scale
• 3.2D转换综合写法
• 4.2D转换总结

1.2D转换

**转换(transform)**是可以实现元素的位移，旋转，缩放等效果

• 移动：translate
• 旋转：rotate
• 缩放：scale

在CSS中的二维坐标系

1.1移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

<style>    div { /* 以坐标形式来写 */ transform: translate(x, y); /* x,y分开来写 */ transform: translateX(100px); transform: translateY(100px); /* 百分数写法,相对自身来说 */ translate:(50%,50%)；    }</style>

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate 最大的优点：不会影响到其他元素的位置
• translate 中的百分比单位是相对于自身元素的
• 对行内标签没有效果

1.2旋转rotate

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

<style>    transform: rotate(度数)    /* 单位是deg */</style>

• rotate 里面跟度数，单位是 deg 例如 rotate(30deg)
• 角度为正时，顺时针，负时，为逆时针
• 默认旋转的中心点是元素的中心点

1.3旋转中心点transform-origin

2D转换中心点：可以设置元素转换的中心点 transform-origin

<style>/* 坐标写法 */    transform-origin: x y;    /* 方位名字写法 */    transform-origin: left bottom;</style>

• 注意后面的参数x 和 y 用空格隔开
• x y 默认转换的中心点是元素的中心点(50% 50%)
• 可以给x y 设置 像素或者方位名词(top bottom left right center)

2.缩放scale

缩放：scale,只要给元素添加上了这个属性就能控制它放大还是缩小

<style>    transform: scale(x,y);</style>

• 注意其中的(x,y)用逗号分割
• transform:scale(1,1)：宽和高都放大一倍，相当于没有放大
• transform:scale(2,2)：宽和高都放大了2倍
• transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
• transform:scale(0.5,0.5)：缩小到原来的0.5倍
• sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

3.2D转换综合写法

• 同时使用多个转换，其格式为: transform:translate() rotate() scale()
• 用文字表示，也就是 transform:移动 旋转 缩放
• 当我们同时有位移和其他属性时候，记得要将移动放到最前面

<style>    transform: translate(30px, 30px) rotate(50deg) scale(1.5);</style>

4.2D转换总结

• 2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的
• 可以分开写比如 translateX(x) 和 translateY(y)
• 2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg
• 2D 缩放 sacle(x,y) 里面参数是数字不跟单位，可以是小数，最大的优势是不影响其他盒子
• 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

China香烟网