码迷,mamicode.com
首页 > 其他好文 > 详细

八、 动画效果

时间:2020-03-08 21:46:25      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:aaa   旋转   一个   效果   code   jmx   for   none   form   

1. 坐标系
    | 注意:在页面开发中,css的2D、3D效果都需要坐标系的相关概念
    | 在2D动画中,坐标系有两条轴,一条是X轴,一条是Y轴
    | 在3D动画中,坐标系多个一个轴,那就是纵深轴(Z轴)

2. 定义方式 --> transform
    | none: 没有效果
    | translate(x,y):定义2D转换
        | x,y参数分别代表向x轴、y轴方向移动多少距离(像素)

技术图片

技术图片

    | translate3D(x,y,z):定义3D转换
        | x,y,z参数分别代表向x轴、y轴、z轴方向移动多少距离(像素)

    | rotate(角度deg):定义2D旋转

    | rotate3D(x,y,z,角度deg):定义3D旋转

    | scale(x,y):定义2D的缩放转换
        | 注意:需要和perspective属性结合使用

    | scale3D(x,y,z):定义3D缩放转换

    | skew(x-angle,y-angle):定义X轴和Y轴的2D倾斜转换

    | perspective(n):为3D转换元素定义透视视图
    
    

八、 动画效果

标签:aaa   旋转   一个   效果   code   jmx   for   none   form   

原文地址:https://www.cnblogs.com/qfshini/p/12445024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!