CSS3的2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
转换(transform)你可以简单理解为变形。
在学习2D转换之前,我们需要先了解vscode中的二维坐标系,它和我们数学中的坐标系稍微有点不一样,它是向右为x轴正方向,向下为y轴正方向,如下图所示:
1.2D位移 translate
所谓的2d位移就是可以通过在x轴、y轴上的位移值,改变物体的位置,有点类似于定位。
1.语法
transform: translate(x,y); /* x表示x轴(横坐标)移动的距离;y表示y轴(纵坐标)移动的距离 */或者分开写,如下所示: transform: translateX(n); transform: translateY(n);
1.2 代码体验
<style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: pink;} </style> <body><div class="box"></div> </body>
以上代码得到的结果如图,div盒子处于浏览器窗口的左上角。
<style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: pink;transform: translate(400px, 200px); /* 增加上2d位移的代码 */transform: translate(50%, 50%); /* 移动单位使用百分比,是相对自身宽度和高度进行移动*/} </style> <body><div class="box"></div> </body>
可以看出在原来代码的基础上,增加了: transform: translate(400px, 200px);这行代码后,div盒子从右上角移动了上图位置,并且是水平向右移动400px,垂直向下移动200px。
右图是使用代码:transform: translate(50%, 50%);得到的效果,可以发现使用百分比单位,是针对自身的宽度和高度而言的。
1.3. 注意点
① 注意translate属性中的x和y用逗号分隔
② translate最大的优点:不会影响到其他元素的位置
③ translate中位移不仅可以使用具体的距离单位,也可以使用百分比单位,而百分比单位是相对于自身元素的,比如 translate:(50%,50%); ,则表示为向右移动自身宽度的一半,向下移动自身高度的一半;
④ ranslate对行内标签没有效果
2. 2D缩放 scale。
所谓缩放,就是缩小和放大。 也就是说scale这个属性是控制物体放大或缩小的。
2.1 语法
transform:scale(x,y); /* x表示x轴(横坐标)缩放的大小;y表示y轴(纵坐标)缩放的大小 */ transform:scale(2) /* 只有一个值时,默认第二个值和第一个一样,也为2 */或者分开写,如下所示: transform: scaleX(); /*表示只设置x轴的缩放 */ transform: scaleY(); /*表示只设置y轴的缩放 */
2.2 代码体验
<style>.box {margin: 100px;width: 200px;height: 200px;background-color: pink;transform: scale(2, 0.5); /* 增加缩放属性的代码 */} </style> <body><div class="box"></div> </body>
上图是使用代码:transform: scale(2, 0.5);得到的效果,可以发现宽度变为了原来的2倍,而高度变为了原来的一半。
2.3 注意点
①注意scale属性中的x和y用逗号分隔
②transform:scale(1,1) :宽和高都放大一倍,相对于没有放大,即值为1时,不放大也不缩小
③transform:scale(2,2) :宽和高都放大了2倍,即值大于1时,为放大对应值倍数的效果
④transform:scale(2) :只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)
⑤transform:scale(0.5,0.5):宽和高都缩小了0.5倍,即值小于1时,为缩小对应值倍数的效果
⑥sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
3.2D旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
3.1 语法
transform:rotate(度数); /* 度数单位为deg */
3.2 代码体验
<style>.box {width: 200px;height: 200px;background-color: pink;transform: rotate(30deg); /* 增加旋转代码——表示绕着旋转中心点顺时针旋转50度 */ } </style> <body><div class="box"></div> </body>
由于增加了2D旋转rotate属性,所以div盒子进行了旋转。最后效果如上图所示。
3.3 注意点
① rotate里面跟度数, 单位是 deg 比如 rotate(30deg)
②角度为正时,顺时针,负时,为逆时针
③默认旋转的中心点是元素的中心点
4.2D倾斜 skew
4.1 语法
transform: skew(x,y); /* x表示水平方向(x轴)的倾斜角度; y表示垂直方向(y轴)的倾斜角度*/ 或者分开写,如下所示: transform: skewX(x); /* 只设置x轴方向的倾斜 */ transform: skewY(y); /* 只设置y轴方向的倾斜 */
4.2 代码体验
<style>.box {width: 200px;height: 200px;background-color: pink;transform: skew(30deg,0); /* 增加倾斜代码 x轴向左倾斜30度,y轴不变 */} </style> <body><div class="box"></div> </body>
增加了代码:transform: skew(30deg, 0); 后,div盒子向左倾斜了30度,如上图所示。
4.3 注意点
①skew里面的度数, 单位也是 deg 比如 skew(30deg,0);
②注意skew属性中的x和y用逗号分隔
③如果skew()里只设置一个值,该值表示x轴倾斜度数
5.2D转换中心点 transform-origin
一般缩放或者旋转默认的中心点都是元素的自身的中心点,但是有时我们想要的效果并不是这样的,比如需要绕着盒子的左下角进行旋转等,这时我们就需要使用transform-origin属性重新设置元素转换的中心点。
5.1 语法
transform-origin: x y; /* x表示x轴的位置 有表示y轴的位置 */
5.2 代码体验
<style>.box {margin: 200px;width: 200px;height: 200px;background-color: pink;transform: rotate(60deg);transform-origin: 0 0; /* 增加重新设置转换中心点,(0,0)即盒子的左上角} </style> <body><div class="box"></div> </body>
上左图是在默认转换中心点的基础上旋转60度的效果;
上右图是在增加代码:transform-origin: 0 0;后,将转换重点点转移到了盒子的左上角后旋转60度的效果。
5.3 注意点
①注意后面的参数 x 和 y 用空格隔开
② x y 默认转换的中心点是元素的中心点 (50% 50%)
③可以给x y 设置 百分比、具体像素值 或者 方位名词 (top bottom left right center)
6.2D转换综合写法
1. 如果我们需要同时使用多个转换,其格式为:transform: translate() rotate() scale() ...等,
2. 其顺序会影转换的效果。(先旋转会改变坐标轴方向)
3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前
7. 2D 转换总结
CSS3转换transform,我们可以简单理解为变形,它有2D 和 3D 之分,今天主要介绍了2D的位移、缩放、旋转和倾斜。倾斜我们一般使用的不多,但是前三个相对比较重要,需要掌握基本的语法使用和对应的注意点,后期可以结合动画属性,做出好看的基本简单动画。
更多推荐
CSS3的2D转换
发布评论