下面介绍下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>
【拓展】
.