admin 管理员组

文章数量: 1184232

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{/* 透视 ：值越大，表示视距越远，则成像越小。反之*/
                perspective: 500px;
                /* 透视点 */
                /* perspective-origin:right top; */
            }
            div{
                width: 350px;
                height: 400px;
            }
            .box1{
                border: 1px  solid red;
                margin: 200px  auto;
                /* 开启3D空间效果 */
                transform-style: preserve-3d;
            }
            .box2{
                border: 1px dashed black;
                transition: all 1s linear;
                /* 元素转换的轴线 */
                transform-origin: center top;
            }
            /* 鼠标悬停 */
            .box1:hover .box2{
                /* transform: rotatex(45deg); */
                /* transform: translate3d(100px,300px,-300px); */
                /* transform: scale3d(2,2,2); */
                /* transform: rotate3d(1,0,0,45deg); */
            }
        </style>
    </head>
    <body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    </body>
</html>

本文标签： 透视 perspective

版权声明：本文标题：3D{透视perspective） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1766494402a3463656.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。