zoukankan      html  css  js  c++  java
  • CSS3--2D&3D的使用

    transform 过渡属性 向元素进行2D或3D转换

    transform-origin:该元素基于某个点来旋转 

    transform-style: preserve-3d 规定嵌套元素如何在3D空间显示;

    perspective :perspective 属性只影响 3D 转换元素,多少像素的3D元素是从视图的perspective属性定义

    backface-visibility:属性定义当元素不面向屏幕时是否可见;

    2D:对元素移动、缩放、拉伸、拉长和转动;

    3D:在三维空间操作,可以改变元素尺寸、形状和位置;

    2D方法:

    1.translate(x,y) 2D转换,沿着X轴和Y轴平行移动元素

    2.translateX(n) 2D转换,沿着X轴平行移动元素

    3..translateY(n) 2D转换,沿着Y轴平行移动元素

    4.scale(x,y) 2D转缩放转换,改变元素的宽度和高度

    5.scaleX(n) 2D转缩放转换,改变元素的宽度

    6.scaleY(n) 2D转缩放转换,改变元素的高度

    7.rotate(angel) 2D旋转,规定任意角度

    8.skew(x-angel,y-angel) 2D倾斜转换,沿着X轴和Y轴

    9.skewX() 2D倾斜转换,沿着X轴

    10.skewY() 2D倾斜转换,沿着Y轴

    3D方法:

    1.translate(x,y,z) 3D转换,沿着X轴和Y轴Z轴转换

    2.translateX(n) 3D转换,沿着X轴转换

    3..translateY(n) 3D转换,沿着Y轴转换

    4..translateZ(n) 3D转换,沿着Z轴转换

    5.scale(x,y) 3D转缩放转换

    6.scaleX(n) 3D转缩放转换,给定X轴的值

    7.scaleY(n) 3D转缩放转换,给定Y轴的值

    8.scaleZ(n) 3D转缩放转换,给定Z轴的值

    9.rotate(angel) 3D旋转,规定任意角度

    10.rotateX(angel)沿着X轴3D旋转

    11.rotateY(angel) 沿着Y轴3D旋转

    12.rotateZ(angel) 沿着Z轴3D旋转

    浏览器支持:

    2D:

    IE10,Firefox,Opera支持,Chrome和Safari需要前缀-webkit-,IE9需要前缀-ms.

    3D:

    IE10,Firefox,Chrome和Safari需要前缀-webkit-,Opera不支持。

    区别:

    3D除了增添了少许2D没有的属性外,其他基本上是细化了2D的属性。

  • 相关阅读:
    Jquery Plugin模版
    jquery之extend
    java反射技术实例
    java基础汇总
    Java学习路线
    java的一个爬虫
    Java深度理解——Java字节代码的操纵
    java编程思想-基础
    hdu 5201 The Monkey King【容斥原理+组合数学】
    容斥原理
  • 原文地址:https://www.cnblogs.com/qinlinkun/p/10554637.html
Copyright © 2011-2022 走看看