CSS3新特性----2D转换

最新推荐文章于 2022-04-05 07:47:35 发布

小白_小可

最新推荐文章于 2022-04-05 07:47:35 发布

阅读量367

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/Layfolk_XK/article/details/112260599

版权

CSS3新增特性:

2D转换(transform)是改变标签在二维平面上的位置和形状的一种技术,是CSS3中具有颠覆性的特征之一,可以实现:缩放(scale),移动(translate),旋转(rotate),倾斜(skew)

2D的移动主要指的是水平垂直方向上的移动

transform语法:

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
transfrom: translateX(n) translateY(n)

x就是 x 轴上水平移动 y就是 y 轴上水平移动

注意:

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

2D旋转的语法:

transform: rotate(0deg);

设置元素的旋转中心点:

语法:

transform-origin: x y;

案例:

实现效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fuy6679E-1609902843303)(C:\Users\x1309\Desktop\闪电GIF制作软件\旋转动画.gif)]

<!DOCTYPE html>
<html lang="en">

<

关注