Css3之高级-5 Css转换(简介2D转换3D转换)

Posted 2020-06-28

一、转换简介

转换概述

  - 转换是使元素改变形状、尺寸和位置的一种效果

  - 又称为变形，即，可以向元素应用2D 或 3D 转换，从而对元素进行旋转、缩放、移动或倾斜

  - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化，改变其形状、尺寸和位置

  - 3D 转换:元素还可以在 Z 轴上发生变化

转换属性

  - transform 属性向元素应用 2D 或者 3D 转换

  - 指定一组转换函数，取值

      - transform: none/transform-function;

  - none

      - 默认值，表示元素不进行转换

  - transform-function

      - 表示一个或者多个转换函数，中间以空格分开

转换的原点

  - transfor-origin 属性用来指定元素的转换原点位置

  - 默认情况下，转换的原点在元素的中心点

      - 或者是 X轴 和 Y轴的 50% 处

  - transform-origin:数值/百分比/关键字;

      - 一个值: 表示所有轴的位置

      - 两个值; 表示 X 轴 和 Y 轴

      - 三个值: 表示 X 轴、Y 轴 和 Z 轴

2D 转换

  - translate() 方法将元素从其当前位置移动

      - 移动到 x 坐标和 y 坐标位置参数

  - translate(x) 或者 translate(x,y)

  - 可取值

      - 数值、百分比

      - 也可以是负值

  - 也可以使用单向位移函数

      - translate(x)

      - translate(y)

2D 位移

2D 缩放

  - scale() 方法用于改变元素的尺寸

      - 根据给定的宽度(X轴)和高度(Y轴)

  - scale(x) 或者 scale(x,y) 

      - 一个参数时，第二个参数默认与第一个值相等

  - 可取值

      - 默认值为1

      - 缩小: 0 到 1 之间的数据

      - 放大: 大于 1 的数值

    - 也可以使用单向缩放函数

      - scaleX(x)

      - scaleY(y)

2D 旋转

  - rotate() 方法用于旋转元素

      - 根据原点，将元素按照顺时针旋转给定的角度

      - 允许负值，元素将逆时针旋转

  - rotate(deg)

2D 倾斜

  - skew() 方法用于让元素倾斜

      - 以原点位置，围绕 X轴 和 Y轴 按照一定的角度倾斜

      - 可能会改变元素的形状

  - skew(x)或者 skew(x,y)，取值为角度

  - 也可以使用单向倾斜函数

      - skewX(x)

      - skewY(y)

二、3D 转换

perspective 属性

  - perspective 属性定义 3D 元素距视图的距离，以像素计

      - 为元素定义perspective 属性时，其子元素会获得透视效果，而不是元素本身

      - 只影响 3D 转换元素

  - 浏览器兼容性

      - Chrome 和 Safari 支持替代的 -webkit-perspective 属性

3D 位移

  - 3D 位移可以改变元素在 Z轴位置

  - 3D 位移主要包含

      - translateZ(z)

      - translate3d(x,y,z)

3D 旋转

  - 3D 旋转主要包含

      - rotateX(deg)

      - rotateY(deg)

      - rotateZ(deg)

      - rotate3d(x,y,z,deg)

3D 缩放

  - 3D 缩放主要包含

      - scaleZ(z)

      - scale3d(x,y,z)

总结：本章内容主要介绍了 Css3之高级-5 Css转换(简介、2D转换、3D转换)

本文出自 “技术交流” 博客，谢绝转载！