zoukankan      html  css  js  c++  java
  • 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);

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

  • 相关阅读:
    工作总结
    JSON数据使用
    DataTable知识
    树形结构菜单
    区域树前后台
    跨域总结
    工作一年感想
    项目整体架构分析
    springboot 和 mongdb连接问题 Exception in thread "main" com.mongodb.MongoSecurityException:
    go函数、方法、接口笔记
  • 原文地址:https://www.cnblogs.com/zhangxiong-tianxiadiyi/p/10933193.html
Copyright © 2011-2022 走看看