transform相关知识点

1. transform实现移动：

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

• 可以用像素也可以用百分比的形式，用百分比是相对自身元素的
• translate不会影响到其他元素的位置
• translate对行内标签无效

2. transform实现倾斜

• skew(x-angle,y-angle)：第一个参数表示水平方向上倾斜角度，第二个参数表示垂直方向上倾斜角度
• 正值向左倾斜，负值向右倾斜
• skewX(angle)：水平方向倾斜
• skewY(angle)：垂直方向倾斜

例：transform:skew(30deg,30deg);水平方向上倾斜30°，垂直方向上倾斜30°
transform:skew(30deg);只写一个参数，这种情况视为只在水平方向上倾斜，垂直方向不倾斜

3. transform实现旋转：

transform:rotate(度数)

• 度数单位deg
• 度数为正，顺时针旋转
  顺时针旋转90°：transform:rotate(90deg);
• 度数为负，逆时针旋转
  逆时针旋转90°：transform:rotate(-90deg);
• 默认旋转的中心点是元素的中心点

4. transform实现缩放：

transform:scale(x,y);
transform:scaleX()
tansform:scaleY()

• 括号里写数字，不跟单位，倍数的意思
• 不会影响其他盒子，可以设置中心点
• 写一个数字则是等比例缩放
  transform:scale(2); X轴和Y轴同时放大两倍
  transform:scaleX(2);X轴放大两倍
  transform:scaleY(2); Y轴放大两倍
  transform:scale(2,5);X轴放大两倍Y轴放大5倍
  transform:scale(0.5);缩小

注意：

综合写有顺序要求，位移要放在最前面，中间空格隔开
transform:translate(150px,50px) rotate(180deg) scale(1.2)

5. 3D实现：

1. perspective 属性：

• 按字面意思，perspective 就是远景，透视图的意思。设置这个就是让我们能够以透视的效果看元素。
• perspective 数值与 3D 效果强度是成反比的
  数值越大，元素的 3D 效果越不明显，看到的物体离你越远。
• 透视写到被观察元素的父盒子上，单位像素

2. transform-style属性：

• transform-style:flat; 默认flat，不开启3D空间
• transform-style:presever-3d; 开启3D空间
• transform-style:presever-3d代码写给父级，但影响的是子盒子

3. 3D移动：
   transform:translate3d(100px,100px,100px);
   里面的x，y，z都不能省略

4. 3D旋转：
   transform:rotate3d(1,0,0,45deg); 沿x轴旋转
   transform:rotate3d(1,1,0,45deg); 沿对角线旋转

最后

以上就是孤独羊为你收集整理的transform相关知识点的全部内容，希望文章能够帮你解决transform相关知识点所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。