CSS3动画属性 | 零基础学HTML（二十九）

来自小星星的你
82 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

  • 2D转换

    • 属性名：transform

    • 作用：对元素进行移动、缩放、转动、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠flash才可以实现的效果

    • 属性值：多种转换方法的属性值，可以实现不同的转换效果

      • 位移translate（）

        • transform的属性值为translate()时，可以实现位移效果 image.png

      • 缩放scale（）

        • transform的属性值为scale（）时，可以实现元素缩放效果 image.png

      • 旋转rotate（）

        • transform属性值设置为rotate（）时，实现元素的旋转

        • 书写语法：rotate（数字deg）：其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有一个属性值

        • 注意：元素旋转后，坐标轴也跟着发生转变。因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异

      • 倾斜skew（）

        • transform属性值设置为skew（），实现元素的倾斜

        • 书写语法：skew（数字deg，数字deg）；两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0

      • 基准点transform-origin属性

        • 作用：调整元素的水平和垂直方向原点的位置

        • 调整元素的基准点

        • 属性值：包含两个，中间使用空格分隔 image.png

  • 3D转换

    • transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成的效果多了一条z轴，如下图 image.png

    • 透视属性perspective

      • 属性名：perspective

       - 作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果

       - 属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸

       - 注意：透视属性需要设置给3D变化元素的父级。比如我要给div中的img设置透视属性，需要给div设置透视属性，而且img只能设置rotateX（）或者rotateY（）才有效果

  • 3D旋转 image.png
    • 属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标 image.png
  • 3D位移 image.png

    • 属性值为像素值或百分比，正负表示位移的方向，正值向对应轴的正方向移动，负值向对应轴的负方向移动

    • 写两个transform属性值时，格式如下：transform: rotate(60deg)  translate(200px)

avatar
文章
阅读
粉丝