2D/3D 转换属性

下面介绍下CSS的2D/3D转换属性

 

【兼容】

IE9+及其他主流浏览器，Opera 只支持 2D 转换

由于目前几乎所有的浏览器对这个属性的渲染效率都很低，所以我们可以用下面的hack去提高渲染效率，

兼容hack写法：

-ms-transform/* IE 9 */

-moz-transform/* Firefox */

-webkit-transform/* Safari 和 Chrome */

-o-transform/* Opera */

 

【目录】

 1. transform（变换）向元素应用 2D 或 3D 转换，该属性允许对元素进行位移、旋转、缩放或倾斜；

 2. transform-origin（变换原点）允许改变被转换元素的位置；

 3.transform-style（变换风格）规定子元素是否保留3D位置；

 4.perspective（透视）规定 3D 元素的透视效果；

 5.perspective-origin（透视来源）规定 3D 元素的底部位置；

 6.backface-visibility（背面能见度）定义元素在不面对屏幕时是否可见；

 

 

【详解】

（1）transform（变换）向元素应用 2D 或 3D 转换

    主要为①translate位移；②scale比例（缩放）；③rotate旋转；④skew倾斜；⑤matrix矩阵；

依次介绍：

①translate位移；

translate(x,y)         定义2D转换（位移）

translate3d(x,y,z) 定义 3D 转换

translateX(x)         定义转换，只是用 X 轴的值（位移）

translateY(y)         定义转换，只是用 Y 轴的值（位移）

translateZ(z)         定义 3D 转换，只是用 Z 轴的值

 ②scale比例（缩放）

scale(x,y)                 定义 2D 缩放转换

scale3d(x,y,z)         定义 3D 缩放转换

scaleX(x)                 通过设置 X 轴的值来定义缩放转换

scaleY(y)                 通过设置 Y 轴的值来定义缩放转换

scaleZ(z)                 通过设置 Z 轴的值来定义 3D 缩放转换

 ③rotate旋转

rotate(angle)         定义 2D 旋转，在参数中规定角度

rotate3d(x,y,z,angle) 定义 3D 旋转

rotateX(angle)         定义沿着 X 轴的 3D 旋转

rotateY(angle)         定义沿着 Y 轴的 3D 旋转

rotateZ(angle)         定义沿着 Z 轴的 3D 旋转

 ④skew倾斜

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换

skewX(angle)                 定义沿着 X 轴的 2D 倾斜转换

skewY(angle)                 定义沿着 Y 轴的 2D 倾斜转换

 ⑤matrix矩阵

matrix(n,n,n,n,n,n)                                    定义 2D 转换，使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定义 3D 转换，使用 16 个值的 4x4 矩阵

 

 （2） transform-origin（变换原点）设置变换的原点，允许改变被转换元素的位置；

  语法：

transform-origin: x-axis y-axis z-axis;

  x-axis：定义视图被置于X轴的何处； y-axis ：置于Y轴何处；z-axis：置于Z轴何处；

<style type="text/css">
#div1{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
<div id="div1">
  <div id="div2">HELLO</div>
</div>

 

（3）transform-style（变换风格）规定子元素是否保留3D位置

【兼容】IE不支持，Firefox 支持该属性，Chrome、Safari 和 Opera 支持hack写法-webkit-transform-style 

  属性值：flat（平面）；preserve-3d（保留3D）

flat（平面）                 子元素将不保留其 3D 位置

preserve-3d（保留3D） 子元素将保留其 3D 位置

<style type="text/css">
#div1{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
<div id="div1">
  <div id="div2">HELLO
  	<div id="div3">YELLOW</div>
  </div>
</div>

  分析：这里我对div2元素设置-webkit-transform-style: preserve-3d属性，那么其子元素div3就保留了3D位置，显示为3D；若改为flat，则div3会显示为平面，失去3D位置

 

（4）perspective（透视）规定 3D 元素的透视效果，通俗理解就是定义3D元素距视图的距离，以像素计

 作用：近大远小,近宽远窄---使渲染更加逼真，且具有层次

 兼容：Chrome 和 Safari 支持hack写法的 -webkit-perspective 透视属性

 默认值为none，与0相同，即不设置透视

<style type="text/css">
#div1{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
<div id="div1">
  <div id="div2">HELLO</div>
</div>

 

（5）perspective-origin（透视来源）规定 3D 元素的底部位置

  perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴，该属性允许改变 3D 元素的底部位置

  当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身

  【注释】：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素

 语法：

perspective-origin: x-axis y-axis;

 

（6）backface-visibility（背面能见度）定义元素在不面对屏幕时是否可见，如果在旋转元素不希望看到其背面时，该属性很有用

 【兼容】IE10+ 和 Firefox 支持 backface-visibility 属性；Opera 15+、Safari 和 Chrome 支持hack写法的 -webkit-backface-visibility 属性

  属性值：visible（可见）背面可见；hidden（隐藏）背面不可见

 下面举个简单例子：

本例有两个 div 元素，均旋转 180 度，背向用户。第一个div元素的 backface-visibility 属性设置为hidden，所以应该是不可见的

<style type="text/css">
div{
position:relative;
height:60px;
width:60px;
border:1px solid #000;
background-color:yellow;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Chrome and Safari */
-moz-transform:rotateY(180deg); /* Firefox */
}
#div1{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
}
#div2{
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
-ms-backface-visibility:visible;
}
</style>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>

 

 最后分享个实践例子：

 

<style type="text/css">
.div1{
    position: relative;
    height: 150px;
    width: 150px;
    margin: 0px;
    padding:2px;
    border: 1px solid black;
    perspective:550;
    -webkit-perspective:550;
    perspective-origin: 50% 100px;
    -webkit-perspecitve-origin: 50% 100px;
}
.div2{
    position: absolute;
    border: 1px solid black;
    background-color: yellow;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -webkit-animation: rotateXing 1.8s infinite linear;
    animation: rotateXing 1.8s infinite linear;
    width:148px;
    height:148px;
    text-align:center;
    line-height:148px;
}
.div3{
    position: absolute;
    border: 1px solid black;
    background-color: green;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -webkit-animation: rotateYing 2.8s infinite linear;
    animation: rotateYing 2.8s infinite linear;
    width:148px;
    height:148px;
    text-align:center;
    line-height:148px;
}
@-webkit-keyframes rotateXing {
  from {
    transform: rotateX(1deg);
    -webkit-transform: rotateX(1deg);
  }
  to {
    transform: rotateX(359deg);
    -webkit-transform: rotateX(359deg);
  }
}
@keyframes rotateXing {
   from {
    transform: rotateX(1deg);
    -webkit-transform: rotateX(1deg);
  }
  to {
    transform: rotateX(359deg);
    -webkit-transform: rotateX(359deg);
  }
}
@-webkit-keyframes rotateYing {
  from {
    transform: rotateY(1deg);
    -webkit-transform: rotateY(1deg);
  }
  to {
    transform: rotateY(359deg);
    -webkit-transform: rotateY(359deg);
  }
}
@keyframes rotateYing {
   from {
    transform: rotateY(1deg);
    -webkit-transform: rotateY(1deg);
  }
  to {
    transform: rotateY(359deg);
    -webkit-transform: rotateY(359deg);
  }
}
</style>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

 

 

 

 

 

 

 

【拓展】

 

 

 

 

 

.