zoukankan      html  css  js  c++  java
  • 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属性,,,同上上上。。。。。。。。

  • 相关阅读:
    使用RabbitMq
    创建.NET core的守护进程
    nginx配置
    让.net core 支持静态文件
    关于sql中如何动态加WHERE条件
    CentOS上部署.net core
    chrom中 background 调用pop.js
    windows下安装redis
    sql server导出大批量数据
    python爬虫笔记
  • 原文地址:https://www.cnblogs.com/bigbang66/p/13543475.html
Copyright © 2011-2022 走看看