css3 preserve-3d 的理解

css3 preserve-3d 的理解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>转换模块-正方体</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        /*去除默认边距*/
    }

    body,
    html {
        width: 100%;
        height: 100%;
    }

    .wrap3d {
        width: 100%;
        height: 100%;
        position: relative;
        /*设置摄像机离目标物体距离 让3D效果看起来更逼真*/
        transform: perspective(400px);
        -webkit-transform: perspective(400px);
        /*设置为3d空间*/
        transform-style: preserve-3d;   

        position: relative;

    }
    .hongmian{
        width:30%;
        height:22rem;
        position: absolute;
        left:30%;
        top:2rem;
        background: #F00;
        transform: rotateX(90deg) translateZ(-20px);
        -webkit-transform: rotateX(4deg) translateZ(-20px);   
    }
    
</style>
</head>

<body>
   <div class="wrap3d">
    <div class="hongmian"></div>
</div>
</body>

</html>

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=2366

发表评论

电子邮件地址不会被公开。 必填项已用*标注