2D转换（transform）

最新推荐文章于 2024-05-22 20:44:17 发布

李文炀

最新推荐文章于 2024-05-22 20:44:17 发布

阅读量512

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_44641622/article/details/104368150

版权

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

移动（translate）

可以改变元素在页面中的位置，类似定位

注意：位移写在公式最前面

语法：transform:translate(x, y) x轴和y轴的位置，
注意：这里的y轴和数学中的y轴是反的。

如果只需要移动一条轴可以分开写
transform:translateX(值)
transform:translateY(值)

重点：

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

旋转（rotate）

语法：transform:rotate(度数) 单位deg

重点：

角度为正，顺时针。角度为负，逆时针
X,Y默认旋转的中心点是元素的中心点（50% 50%），等价于center，center
还可以给x y设置像素或者方位名词（left，bottom，right，top， center）
比如left，bottom就是左下角

如何设置元素旋转的中心点

**语法：**transform-origin: x y;

缩放（scale）

语法:transform:scale(x, y)

注意逗号分隔

transform:scale(1，1)宽高都放大一倍，相当于没有放大
transform:scale(2，2)宽高都放大2倍
transform:scale(2) 只写一个参数，第二个参数和第一个参数一样
transform:scale(0.5，0.5)小于一就是缩小

优势：可以设置中心点，而且不影响其他盒子

倾斜（skew）

skew() 函数定义了一个元素在二维平面上的倾斜转换

skew()方法跟translate()方法、scale()方法一样，也有3种情况：

skewX(x)：使元素在水平方向倾斜（X轴倾斜）,方法会保持高度
skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）,方法会保持高度
skew(x,y)：使元素在水平方向和垂直方向同时倾斜
X轴和Y轴同时倾方法会先按照skewX方法倾斜，然后按照skewY方法倾斜

语法：transform：skew（x，y）单位deg

2D转换综合写法

注意：

同时使用多个转换，其格式为: transform:translate() rotate() scale()…等
其顺序会影响转换的效果（先旋转会改变坐标）
当我们同时有位移和其他属性的时候，记得要将位移放在最前面

简单案例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div></div>
  <p>鼠标移到div</p>
</body>
<style>
  div{
    width: 50px;
    height: 50px;
    background-color: aqua;
    transition: all .5s;
  }

  div:hover {
    transform:translate(200px,200px) rotate(45deg) scale(2.5)
  }
</style>

</html>

李文炀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2D转换（transform）

转换: 是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果移动（translate）可以改变元素在页面中的位置，类似定位注意：位移写在公式最前面语法：transform:translate(x, y) x轴和y轴的位置，注意：这里的y轴和数学中的y轴是反的。如果只需要移动一条轴可以分开写transform:transla...
复制链接

扫一扫