• c3新特性


    2D移动和旋转

    二维平面移动

    语法:

    transform:translateX(移动的距离) translateY(移动的距离);

    Transform:translate(水平移动距离,垂直移动距离)

    可以设置负值,水平的正值是向右移动,垂直的正值是向下移动

    二维平面旋转

    语法:

    Transform:rotate(30deg);

    旋转原点的设置

    transform-origin:center(默认值)

    可以设置left,top,right,bottom,center,

    百分比设置:transform-origin:水平位置的百分比 垂直位置的百分比

     

    3D移动和旋转

    透视点

    在所看元素的父元素或者是祖先元素上设置透视点

    语法:perspective: 1000px;

    三维立体的移动

    语法:

    transform: translateZ(200px);

    transform: translate3d(水平移动,垂直移动,z轴移动);

    z轴:z轴垂直于屏幕,方向是射向我们。

    三维立体的旋转

    语法:

    /*transform: rotateX(30deg);*/

    /*transform: rotateY(30deg);*/

    /*transform: rotateZ(30deg);*/

    transform: rotate3d(1,1,1,30deg);

    解析:rotate3d(x,y,z,30deg),x,y,z建立一个用原点射向(x,y,z)这个坐标的向量,用这个向量作为轴进行旋转。

     

    缩放

    语法:

    transform:scale(整体放大的倍数)

    Transform:scale(水平缩放的倍数,垂直缩放的倍数)


    倾斜

    语法:transform: skew(15deg,0deg);

    小技巧:如果先要文字板正,那么反倾斜即可

  • 相关阅读:
    bzoj3237[Ahoi2013] 连通图
    bzoj3075[Usaco2013]Necklace
    bzoj1876[SDOI2009] SuperGCD
    bzoj3295[Cqoi2011] 动态逆序对
    BestCoder#86 E / hdu5808 Price List Strike Back
    bzoj2223[Coci 2009] PATULJCI
    bzoj2738 矩阵乘法
    poj 1321 -- 棋盘问题
    poj 3083 -- Children of the Candy Corn
    poj 2488 -- A Knight's Journey
  • 原文地址:https://www.cnblogs.com/zhangxiong-tianxiadiyi/p/10933193.html
Copyright © 2020-2023  润新知