zoukankan      html  css  js  c++  java
  • CSS3:2D转换方法

    利用transform 可以实现旋转、缩放、倾斜、移动

    属性有:translate、scale

    移动:

    translateX(10px); //水平方向移动10px

    translateY(50px); //垂直方向移动50px

    translate(10px);    //水平方向移动10px

    translate(10px,50px);   ///水平方向移动10px,垂直方向移动50px

     

    缩放:

    scaleX(2);    //宽增大为原来的两倍

    scaleY(2);    //高增大为原来的两倍

    scale(2);   //增大为原来的2倍

    scale(1,2);    //宽不变,高增大为原来的2倍

    旋转:

    rotate(30deg);    //旋转30度

    倾斜:

    skewX(30deg);    //沿着X轴倾斜30度

    skewY(30deg);   //沿着Y轴倾斜30度

    skew(10deg,20deg);     //沿X轴倾斜10度,沿Y轴倾斜20度

    当然,要兼容的话就要写全前缀了:如

    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);     /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);     /* Opera */

    matrix:比较复杂,涉及到矩阵的运算,对应的矩阵是

      (省略1w+字..)

    只需要给abcdef附上相应的值就可以了

    translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)转换而来

    scale(sx,sy)可以由matrix(sx,0,0,sy,0,0) 转换而来

    rotate(θ)可以由matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 转换而来

    skew(θx,θy)可以由matrix(1,tan(θy),tan(θx),1,0,0) 转换而来

    更多看此文章:http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

    演示:http://peterned.home.xs4all.nl/matrices/

  • 相关阅读:
    实验 6 数组1输出最大值和它所对应的下标
    实验5第二题
    实验5第一题
    作业 3 应用分支与循环结构解决问题 判断是否闰年
    心得与体会1
    第七章
    第六章
    第五章
    第四章
    第一章
  • 原文地址:https://www.cnblogs.com/tinyphp/p/4744338.html
Copyright © 2011-2022 走看看