您的位置: 首页  >  文章  >  前端零基础入门 -- CSS3转换

前端零基础入门 -- CSS3转换

分类: 文章 • 2025-05-18 13:11:16

CSS3的transform属性

  1. 变形属性 – 让一个元素在坐标系统中变形，这个属性会包含一系列的变形函数，可以移动、旋转和缩放元素
  2. 语法：transform：
    a. none – 没有变形 – 默认值
    b. transform-functions – 变形函数
  3. 兼容性：IE10+ firefox16 chrome36 safari9 opera12.1

transform的2D转换

1. rotate() – 旋转

a. 通过指定的角度对元素进行2D的旋转
b. 语法：transform：rotate(angle)
c. 参数说明：
ⅰ. angle表示角度
ⅱ. 正数表示顺时针旋转
ⅲ. 负数表示逆时针旋转
d. 注意：
ⅰ. rotate角度值参照圆形角度设置证书顺时针，负数逆时针
ⅱ. 为了满足兼容性，需要加上技术前缀

2. translate() – 平移

translate()方法，根据X轴和Y轴位置给定的参数，从当前元素位置进行移动
三种情况：
a. translateX(x) – 仅仅水平方向移动（X轴移动）
ⅰ. 通过给定一个X轴方向上的参数指定一个translation
ⅱ. 语法：transform：translate(x)
ⅲ. 参数说明：数值可以改变大小，left、right等无效果，%可以用，em字符单位可以用
b. translateY(y) – 仅仅垂直方向移动（Y轴移动）
ⅰ. 通过给定一个Y轴方向上的参数指定一个translation
ⅱ. 语法：transform：translate(y)
ⅲ. 参数说明：数值可以改变大小，left、right等无效果，%可以用，em字符单位可以用
c. translate() – 水平方向和垂直方向同时移动（X轴移动和Y轴移动）
ⅰ. 通过矢量（x，y）指定一个2D平移，x是第一个过渡值参数，y是第二个过渡值参数
ⅱ. 语法：transform：translate（水平值，垂直值）
ⅲ. 参数说明：x轴值必须填写，y轴值可选填（不填写默认值是0）

3. scale() – 缩放

scale()方法，指定对象的2D缩放
三种情况：
a. scaleX()
ⅰ. 使用scale(x，1)缩放矢量执行缩放操作，x为所需参数
ⅱ. 语法：transform：scaleX(number)
ⅲ. 参数说明：.5表示0.5代表以中心为原点进行50%的缩小，设置比1大的值表示放大，设置为0显示为无
b. scaleY()
ⅰ. 使用scale(1，y)缩放矢量执行缩放操作，y为所需参数
ⅱ. 语法：transform：scaleY(number)
ⅲ. 参数说明：.5表示0.5代表以中心为原点进行50%的缩小，设置比1大的值表示放大，设置为0显示为无
c. scale()
ⅰ. 使用（x，y）缩放矢量的两个参数指定一个2D缩放
ⅱ. 语法：transform：scale(num,num)
ⅲ. 参数说明：.5表示0.5代表以中心为原点进行50%的缩小，设置比1大的值表示放大，设置为0显示为无，两个参数说明x和y都进行比例缩放，一个参数说明x，y同时进行等比例缩放

4. skew() – 扭曲或斜切

skew()方法，指定对象的斜切扭曲
三种情况：
a. skewX(angle)
ⅰ. 按给定的角度沿着X轴指定一个斜切变化
ⅱ. 语法：transform：skewX(angle)
ⅲ. 参数说明：正值：逆时针，负值：顺时针，总结：-90deg~90deg是正确的取值范围
b. skewY(angle)
ⅰ. 按给定的角度沿着Y轴指定一个斜切变化
ⅱ. 语法：transform：skewY(angle)
ⅲ. 参数说明：正值：顺时针，负值：逆时针，总结：-90deg~90deg是正确的取值范围
c. skew(angle,angle)
ⅰ. 按给定的角度沿着X轴和Y轴指定一个斜切变换
ⅱ. 语法：transform：skew(angle,angle)

transform的3D转换

1. rotate3d() – 3D方向的旋转

a. 旋转rotate X()
ⅰ. 指定对象在X轴方向的旋转角度
ⅱ. 语法：transform： rotateX(angle)
ⅲ. angle表示角度
b. 旋转rotate Y()
ⅰ. 指定对象在Y轴方向的旋转角度
ⅱ. 语法：transform： rotateY(angle)
ⅲ. angle表示角度
c. 旋转rotate Z()
ⅰ. 指定对象在Z轴方向的旋转角度
ⅱ. 语法：transform： rotateZ(angle)
ⅲ. angle表示角度
d. 旋转rotate 3d()
ⅰ. 指定对象的3D旋转角度
ⅱ. 语法：transform： rotate(x,y,z,angle)
ⅲ. 前三个参数分别表示旋转方向x,y,z，第四个参数表示旋转的角度，参数不允许省略。
ⅳ. 建议取值的范围：

  1. x: 0-10
  2. y: 0-10
  3. z：0-10
  4. angle：-360deg~360deg

2. translate3d() – 3D方向的平移

a. 平移translateZ()
ⅰ. 指定对象的Z轴的平移
ⅱ. 语法：transform：translateZ（）
ⅲ. 参数对应Z轴，不允许省略
ⅳ. 发现改变值没有变化，注意设置5px表示向屏幕来了5个像素，负值表示远离屏幕。
b. 平移translate3d()
ⅰ. 指定对象的3D位移
ⅱ. 语法：transform：translate3d（x,y,z）
ⅲ. 参数对应各个轴，参数不允许省略

3. scale3d() – 3D方向的缩放

a. 缩放scaleZ（）
ⅰ. 指定对象的Z轴的缩放
ⅱ. 语法：transform：scaleZ();
ⅲ. 参数对应Z轴，不允许省略。
ⅳ. 没有任何变化，但是厚度发生了改变
b. 缩放scale3d（）
ⅰ. 指定对象的3d缩放
ⅱ. 语法：transform：scale3d(x,y,z);
ⅲ. 参数对应各个轴，不允许省略。
ⅳ. 三个值缺一不可，少一个的话将不再显示

transform和坐标系统

transform和坐标的引入目的是为了进行旋转、缩放和平移能够有一个基准点

transform-origin属性

  1. 此属性允许更改转换元素的位置
  2. 语法：transform-origin: x y z
  3. 参数说明：可以设置百分比，也可以设置类似left，top的值

拓展属性

transform-style属性

  1. 指定嵌套元素是怎样在三位空间呈现的
  2. 语法：transform-style：flat（表示所有子元素在2D呈现），preserve-3d（表示所有子元素在3D呈现）
  3. 默认值：flat

perspective属性

  1. 指定观察者与[z=0]平面的距离，使得具有三维位置变化的元素产生透视的效果
  2. 语法：perspective：number（元素距离视图的距离，以像素计），none（与0效果一样，不设置透视）
  3. 默认值：none
  4. 越趋近于0相当于我们靠近屏幕越近，等于0效果显示；负数没有任何效果，但是数值越大的话表示我们越从更高的地方看下去，数值特别大的话，效果不明显的。

perspective-origin属性

  1. 指定透视点的位置
  2. 语法：perspective-origin：x-axis y-axis
  3. 默认值：50% 50%
  4. 参数说明：
    x-axis：定义该视图在X轴上的位置
    a. left，center，right
    b. length – 数值
    c. %
    y-axis：定义该视图在Y轴上的位置
    a. top，center，bottom
    b. length – 数值
    c. %

总结

  1. 从顶部看就是俯视
  2. 从底部看就是仰视

backface-visibility属性

  1. 指定元素背面面向用户时是否能看见
  2. 语法backface-visibility：visible（背面是可见的），hidden （背面是不可见的）
  3. 默认值：visible（类似透明效果）

CSS3转换案例 – 骰子

前端零基础入门 -- CSS3转换
补充知识点：display属性
前端零基础入门 -- CSS3转换

相关推荐