3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
它如何工作?
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
浏览器支持
属性 | 浏览器支持 | ||||
---|---|---|---|---|---|
transform | IE | 火狐 | 谷歌 | Safari | 不支持欧鹏 |
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换(它只支持 2D 转换)。
rotateX() 方法
通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
转换属性
下面的表格列出了所有的转换属性:
属性 | 描述 | CSS |
---|---|---|
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
perspective | 规定 3D 元素的透视效果。 | 3 |
perspective-origin | 规定 3D 元素的底部位置。 | 3 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
2D Transform 方法
函数 | 描述 |
---|---|
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 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
实例:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{ margin:0px; padding:0px; list-style: none; font-size: 100px; color:greenyellow; } #out{ width:500px; height:500px; position: relative; perspective:800px; border:1px solid red; margin:70px auto; } ul{ position: absolute; left:0; top:0; right:0; bottom:0; width:200px; height:200px; /*border:1px solid red;*/ margin:auto auto; transform-style:preserve-3d; transform-origin:center center 100px; } ul li{ width:200px; height:200px; position: absolute; left:0; top:0; text-align: center; line-height: 200px; border-radius:10px; opacity: 0.9; } ul li:nth-of-type(1){ background:red; transform:rotateX(90deg); transform-origin:top; } ul li:nth-of-type(2){ background:green; transform:rotateY(-90deg); transform-origin:left; } ul li:nth-of-type(3){ background:yellow; transform:rotateX(-90deg); transform-origin:bottom; } ul li:nth-of-type(4){ background:blue; transform:rotateY(90deg); transform-origin:right; } ul li:nth-of-type(5){ background:orange; transform:rotateX(360deg); } ul li:nth-of-type(6){ background:pink; transform:translateZ(200px); } </style> <body> <div id='out'> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script> window.onload=function(){ //获取ul var box=document.getElementById('out').getElementsByTagName('ul')[0]; //获取屏幕正中坐标值 var dx=document.documentElement.clientWidth/2; var dy=document.documentElement.clientHeight/2; document.onmousedown=function(e){ //鼠标按下时的坐标点 var xx=e.clientX; var yy=e.clientY; document.onmousemove=function(e){ //阻止默认行为 e.preventDefault(); //获取鼠标移动时的各个坐标 var cx=e.clientX; var cy=e.clientY; //鼠标当前位置与屏幕中心点的差值 var chax=cx-dx; var chay=cy-dy; //利用勾股定力求的r var r=Math.sqrt(chax*chax+chay*chay); //已知三边长度,获得cos与sin值 var x=chax/r; var y=chay/r; //dd为鼠标当前位置与鼠标按下位置坐标的差值的开方 var dd=Math.sqrt((cx-xx)*(cx-xx)+(cy-yy)*(cy-yy)); box.style.transform='rotate3d('+y+','+x+',0,'+dd+'deg)'; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } } </script> </body> </html>