translate3d怎么用？translate3D()方法详细介绍

更新时间:2021-11-02 来源:黑马程序员浏览量:

在三维空间里，除了rotateX()、rotateY()和rotateZ()函数可以让元素在三维空间中旋转之外，还有一个rotate3d()函数。在3D空间，三个维度也就是三个坐标，即长、宽、高。轴的旋转是围绕一个[x，y，z]向量并经过元素原点。其基本语法如下。

rotate3d(x, y, z, angle);

在上述语法格式中，各参数属性值的取值说明如下。

● x：代表横向坐标位移向量的长度。

● y：代表纵向坐标位移向量的长度。

● z：代表Z 轴位移向量的长度。此值不能是一个百分比值，否则将会视为无效值。

● angle：角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正，元素顺时针旋转，反之元素逆时针旋转。

需要说明的是，在CSS3中包含很多转换的属性，通过这些属性可以设置不同的转换效果，具体属性如下：

**translate3D转换的属性**
属性名称	描述
transform	向元素应用2D 或3D 转换
transform-origin	允许改变被转换元素的位置
transform-style	规定被嵌套元素如何在3D空间中显示
perspective	规定3D元素的透视效果
perspective-origin	规定3D元素的底部位置
backface-visibility	定义元素在不面对屏幕时是否可

另外，CSS3中还包含很多转换的方法，运用这些方法可以实现不同的转换效果，具体方法如下所示。

**translate3D转换的方法**
方法名称	描述
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	定义3D转换，使用16个值的4×4矩陈
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>
    <head>
        <meta charset="utf-8">
        <title>translate3D（）方法</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                margin: 50px auto;
                border: 5px solid #000;
                position: relative;

                perspective: 50000px;　　　　　/*规定 3D元素的透视效果*/
                -ms-perspective: 50000px;　　　　/* IE9浏览器兼容代码 */
                -webkit-perspective: 50000px;　　/* Safari andChrome浏览器兼容代码 */
                -moz-perspective: 50000px;　　　/*Firefox浏览器兼容代码*/
                -o-perspective: 50000px;　　　　/*Opera浏览器兼容代码*/

                transform-style: preserve-3d;　　　/*规定被嵌套元素如何在 3D空间中显示*/
                -ms-transform-style: preserve-3d;　/* IE9浏览器兼容代码 */
                -webkit-transform-style: preserve-3d;　　/*Safari andChrome浏览器兼容代码 */
                -moz-transform-style: preserve-3d;　　　/*Firefox浏览器兼容代码*/
                -o-transform-style: preserve-3d;　　　　/*Opera浏览器兼容代码*/

                transition: all 1s ease 0s;　　　　　　　/*设置过渡效果*/
                -webkit-transition: all 1s ease 0s;　　　/*Safari andChrome浏览器兼容代码*/
                -moz-transition: all 1s ease 0s;　　　　/*Firefox浏览器兼容代码*/
                -o-transition: all 1s ease 0s;　　　　　/*Opera浏览器兼容代码*/
    　       }

            div:hover{
                transform: rotateX(-90deg);　　　　　/* 设置旋转角度*/
                -ms-transform: rotateX(-90deg);　　　　/* IE9浏览器兼容代码 */
                -webkit-transform: rotateX(-90deg);　　/*Safari andChrome浏览器兼容代码 */
                -moz-transform: rotateX(-90deg);　　　/*Firefox浏览器兼容代码*/
                -o-transform: rotateX(-90deg);　　　　/*Opera浏览器兼容代码*/
            }

            div img{
                position: absolute;
                top: 0;
                left: 0;
            }

            div img.no1{
                transform: translateZ(100px);　　　　　/* 设置旋转轴*/
                -ms-transform: rotateZ(100px);　　　　/* IE9浏览器兼容代码 */
                -webkit-transform: rotateZ(100px);　　　/*Safari andChrome浏览器兼容代码 */
                -moz-transform: rotateZ(100px);　　　/*Firefox浏览器兼容代码*/
                -o-transform: rotateZ(100px);　　　　　/*Opera浏览器兼容代码*/
                z-index: 2;
            }

            div img.no2{
                transform: rotateX(90deg) translateZ(100px);            /* 设置旋转轴和旋转角度*/
                -ms-transform: rotateX(90deg) translateZ(100px);        /* IE9浏览器兼容代码 */
                -webkit-transform: rotateX(90deg) translateZ(100px);        /*SafariandChrome浏览器兼容代码 */
                -moz-transform: rotateX(90deg) translateZ(100px);       /*Firefox浏览器兼容代码*/
                -o-transform: rotateX(90deg) translateZ(100px);         /*Opera浏览器兼容代码*/
            }
        </style>

　</head>
<body>
　<div>
　   <img class="no1" src="../images/1.png" alt="1">
　   <img class="no2" src="../images/2.png" alt="2">
　</div>
</body>
</html>

在上面案例中，通过perspective属性规定3D元素的透视效果，transform-style属性规定元素在3D空间中的显示方式，并且分别针对

和设置不同的旋转轴和旋转角度。

运行例代码，默认效果如下图所示。

1635843398250_旋转默认效果.jpg