zoukankan      html  css  js  c++  java
  • css3 <3D 转换>

    css3 <3D 转换>

    通过 CSS3 3D 转换,能够使我们对元素在2d空间内模拟3D运动,如:元素绕着Y轴和X轴旋转,沿着Z轴进行移动、缩放、拉长或拉伸等等。

    3D兼容性

    css3D属性

    属性描述CSS
    transform 向元素应用 2D 或 3D 转换函数。 3
    transform-origin 允许你改变被转换元素的位置。 3
    transform-style 规定被嵌套元素如何在 3D 空间中显示。flat子元素将不保留其 3D 位置。preserve-3d 子元素将保留其 3D 位置 3
    perspective 规定 3D 元素的透视效果。 3
    perspective-origin 规定观察者的位置。 3
    backface-visibility 定义元素在不面对屏幕时是否可见。visible 背面可见hidden 背面不可见 3

     

    css3<3D 转换>函数(transform-functions-3d)

    函数描述
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
    translate3d(x,y,z) 定义 3D 转化。
    translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
    translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
    translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
    scale3d(x,y,z) 定义 3D 缩放转换。
    scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
    scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
    scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
    rotate3d(x,y,z,angle) 定义 3D 旋转。
    rotateX(angle) 定义沿 X 轴的 3D 旋转。
    rotateY(angle) 定义沿 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

     

    3D 实例

    要定义3d,那么首先需要的是在平面上建立一个三维的场景

     

    3D场景的建立

    .box{
      width:800px;
      height:800px;
      perspective: 2000px; /*定义透视点*/
      perspective-origin: center center ; /*默认的观察者位置是在中间的。当然我们可以改变。*/
    }

     

    3D背面的元素可见

    当一个元素是背靠我们的时候,默认时候我们是看不见这个元素的

    .box{
      width:800px;
      height:800px;
      backface-visibility: visible;//这样我们就可以看见这个元素的背面了。
    }

    改变3D元素的变换轴

    默认的变化中心的点都是在中心的

    div{
      transform-origin: center center 200px; //这个时候我们将这个元素的变化轴向Z轴移动了200px
    }

    3D旋转变化

    默认是z轴旋转的,有了3d之后,那么x和y的变化就可以看见效果了

    div{
      width:200px;
      height:200px;
      transform:rotate(360deg);
    //transform:rotate3d(1,100,10,360deg);
    //transform:rotate3d(x,y,z,Ddeg);   由原点指向(x,y,z)成方向轴,然后左手定则,确定旋转方向,进行D角度旋转,得到特效结果。
    }

    3D平移变化

    div{
      width:200px;
      height:200px;
      transform:translate3d(200px,200px,200px);
    //transform:rotateZ(200px);  
    }
  • 相关阅读:
    总结第一、二类斯特林数(模板)
    总结组合数的几种求法(模板)
    HDU5521 Meeting(dijkstra+巧妙建图)
    BZOJ4152 The Captain(dijkstra+巧妙建图)
    CF1194D 1-2-K Game (博弈论)
    JavaScript字符串的操作
    JavaScript基础–闭包
    JavsScript基础–声明提升
    JavaScript基础–作用域
    css基础(一)
  • 原文地址:https://www.cnblogs.com/janewh/p/13891937.html
Copyright © 2011-2022 走看看