Css3之高级-5 Css转换(简介、2

发布时间：2019-07-13 11:29:29编辑：auto阅读（1285）

    一、转换简介


    转换概述

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

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

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

    wKioL1byTR_iN-aVAABNmqr3oas948.png

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

    wKiom1byT6vyQX2TAAAxu1EifnA024.png


    转换属性

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

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

          - transform: none/transform-function;

      - none

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

      - transform-function

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

    wKiom1byUdajisvNAAEoTxgfzbo045.png


    转换的原点

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

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

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

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

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

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

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

    wKiom1byVKGgAKwQAAB5cVJW-jM597.png


    2D 转换

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

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

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

      - 可取值

          - 数值、百分比

          - 也可以是负值

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

          - translate(x)

          - translate(y)


    2D 位移

    wKioL1byVvmhV5KEAADDgROFX_k862.png


    2D 缩放

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

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

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

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

      - 可取值

          - 默认值为1

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

          - 放大: 大于 1 的数值

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

          - scaleX(x)

          - scaleY(y)

    wKiom1byV2Gw7u22AAC9nGsyjS8749.png


    2D 旋转

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

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

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

      - rotate(deg)

    wKiom1byWauiqEj4AAGAT6B7yq0395.png


    2D 倾斜

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

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

          - 可能会改变元素的形状

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

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

          - skewX(x)

          - skewY(y)

    wKioL1byWuDi-edCAAGQ3PPK6p0651.png


    二、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)

    wKioL1byXV6ggS-JAAGi5Cnnlvc352.png

    wKiom1byXPGxH1dBAAHUKdfqGAA500.png


    3D 缩放

      - 3D 缩放主要包含

          - scaleZ(z)

          - scale3d(x,y,z)


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


关键字：

上一篇： linux运维实战练习-2016年3月4

下一篇： H3CNE学习笔记