• CSS3动画效果--2D


    知识点一:旋转

    transform: rotate(180deg)   //只能传一个参数,,正值是顺时针  负值是逆时针
    

     度数用deg表示

    沿着x轴旋转:

    transform: rotateX(180deg);
    

     沿着Y轴旋转:

    transform: rotateY(180deg);
    

     默认是沿着中心旋转。。。

    改变中心轴旋转位置

    transform-origin: top left; //沿着左上角旋转
    transform-origin: 100px 200px; //沿着坐标那个点旋转
    

     和上一个配合使用,有两种形式写参数

    知识点二:倾斜

    transform: skew(x,y);
    transform: skewX(x);
    transform: skewY(y);
    

     可以传两个参数:第一个是x轴的偏移,,角度是与y轴的夹角

    第二个是Y轴的偏移,,角度是与X轴的夹角

    围绕圆心旋转

    改变旋转轴位置:  transform-origin: top right;     //同上

    知识点三:平移

    transform: translate(x,y);
     x轴距离    y轴距离   可以为正负值
    

     平移没有origin属性  ,,因为是整体平移

    知识点四:缩放

    transform: scale(n);
    
    transform:  scale(x,y);
    

    一个参数时 : n表示数字,0-1之间是缩放的,正常值是1,,,比1 大的就是放大

    两个值时,一个是X位置,一个是Y位置

    有origin属性,,,同上上上。。。。。。。。

  • 相关阅读:
    最小覆盖圆算法
    hdu2202(最大三角形 )凸包
    hdu1392(凸包)
    hdu1348
    凸包模板
    凸包算法
    DataTable和List互转
    没有功能需求设计文档?对不起,拒绝开发!【分享】
    [分享]浅谈分布式数据库
    微信公众号授权,支付,退款总结【shoucang】
  • 原文地址:https://www.cnblogs.com/bigbang66/p/13543475.html
Copyright © 2020-2023  润新知