zoukankan      html  css  js  c++  java
  • CC3中的2D转换

    2D转换方法:

    translate()
    rotate()
    scale()
    skew()
    matrix()

    1、translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动

    例如:

    1 div
    2 {
    3 transform: translate(50px,100px);
    4 -ms-transform: translate(50px,100px); /* IE 9 */
    5 -webkit-transform: translate(50px,100px); /* Safari and Chrome */
    6 }

    translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。

    2、rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

    例如:

    1 div
    2 {
    3 transform: rotate(30deg);
    4 -ms-transform: rotate(30deg); /* IE 9 */
    5 -webkit-transform: rotate(30deg); /* Safari and Chrome */
    6 }

    rotate值(30deg)元素顺时针旋转30度。

    3、scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

     

    例如:

    1 -ms-transform:scale(2,3); /* IE 9 */
    2 -webkit-transform: scale(2,3); /* Safari */
    3 transform: scale(2,3); /* 标准语法 */

    scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。

    4、skew() 方法

    语法:

    1 transform:skew(<angle> [,<angle>]);

    包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜

    • skewX(<angle>);表示只在X轴(水平方向)倾斜
    • skewY(<angle>);表示只在Y轴(垂直方向)倾斜

    例如”:

    1 div
    2 {
    3 transform: skew(30deg,20deg);
    4 -ms-transform: skew(30deg,20deg); /* IE 9 */
    5 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
    6 }

    skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度

    5、matrix()方法和2D变换方法合并成一个。

    matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

     例如:

    1 div
    2 {
    3 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    4 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    5 -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
    6 }

     

  • 相关阅读:
    性能优化之
    gruntjs开发实例
    从数组里随机获取N项
    调试工具-fiddler:本地资源替换线上调试
    HTML5-canvas实例:2D折线数据图与2D扇形图
    移动前端兼容性笔记
    Less开发指南(三)- 代码文件跟踪调试
    像纸质笔记本一样给div,textarea添加行的分割线
    基于视图的增删改查操作(颠覆传统思维吧)
    恶劣的百度推广人员
  • 原文地址:https://www.cnblogs.com/white-the-Alan/p/8909690.html
Copyright © 2011-2022 走看看