transform属性——css3变形效果3D

版权声明:本文的原作者 http://blog.csdn.net/mooncom/article/ ,支持原著,拒绝盗版。 https://blog.csdn.net/MOONCOM/article/details/54564576
由于3D是立体三维,在x、y轴的基础上一般会多出一个z轴,深入跃出轴。
要使用transform实现3D效果,首先需要为该元素或该元素的直接父元素设置如下2个属性属性
1、transform-style     该属性是指定嵌套元素如何在3D空间中呈现
属性值:  flat            默认值,表示所有子元素在2D平面呈现
          preserve-3d     表示子元素在3D空间呈现
2、perspective         该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而
投放到一个2D平面上。
属性值:  none            默认值,表示无限的角度来看3D物体,但看上去是平的
          长度值          接受一个长度单位大于0的值,其单位不能为百分比。值越大,角
      度出现的越远,3D物体越小,直至3D原有的大小
以上两个属性的示例如下:
eg. div{
        perspective:1000px;
    transform-style:preserve-3d;
}
注意:上面的两个值设置在该元素,或该元素的直接父元素中,显示的效果是不一样的。

一、translate3d(x,y,z)   必须写三个参数,且这三个参数可以为负值
eg. img{
        transform:translate3d(100px,100px,300px);
}
还可以直接写translateZ(),这样默认x和y轴的值为0
eg. img{
        transform:translateZ(-300px);
}

二、scale3d(x,y,z)       3D缩放,单独设置无效,需要配合角度
eg. img{
        transform:scale3d(1,1,1.5) rotateX(45deg);
}
scaleZ(z)            单独设置z轴,x和y轴默认为1
eg. img{
        transform:scaleZ(1.5) rotateX(45deg);
}

三、rotate3d(x,y,z,a)    设置3D旋转,a表示角度,xyz是0或1之间的数值
eg. img{
        transform:rotate3d(1,0,0,45deg);
}
rotateX(a)、rotateY(a)、rotateZ(a)     单独设置3D旋转,可以分开写,也可写在一起
eg. img{
        //transform:rotateX(45deg);
    transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}


perspective-origin   改变3D元素变形的基准点,默认是元素的中心位置,如果改变了基准点。
它就会按照这个基准点进行变形。
属性值可以使用关键字,也可以使用百分数和具体值
关键字如下:
1、指定x轴的位置     left、center、right
2、指定y轴的位置     top、center、bottom
eg. div{
        perspective-origin:left top;
    perspective-origin:0px 0px;
    perspective-origin:0% 0%;
}

注意:

1、目前浏览器都不支持 perspective-origin 属性。

Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴(属性值只有两个)。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。

注释:该属性必须与 perspective 属性一同使用,而且只影响 3D 转换元素。

2、使用属性perspective和perspective-origin,受影响的是子元素,而非元素本身
但是可以在元素的transform属性中使用perspective,此时perspective作用的是该元素本身。注意,perspective要写在最前面。
transform:perspective(400px) rotateY(40deg);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0px;
            background-color: #333;
        }
        #demo{
            position: relative;
            height: 50px;
            width: 400px;
            margin: 100px auto;
            background: linear-gradient(90deg,rgb(204,0,0),#333);

        }
        #demo::before{
            content: "";
            display: block;
            position: absolute;
            left: -50px;
            border: 25px solid transparent;
            border-right-color:rgb(204,0,0) ;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <script>
        var oDemo=document.getElementById("demo");

    </script>
</body>
</html>


展开阅读全文

没有更多推荐了,返回首页