3D转换

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>

 

posted on 2017-05-15 19:35  skylark_one  阅读(164)  评论(0)  编辑  收藏  举报

导航