2D/3D 转换属性

2018-02-11 14:06:30来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

下面介绍下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 >  <div >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 >  <div >HELLO  <div >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 >  <div >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 >DIV 1</div><div >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 >  <div ></div>  <div ></div></div>

 

 

 

 

 

 

 

【拓展】

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台