CSS-box立体图型

最新推荐文章于 2023-04-03 10:17:21 发布

aozhuangzhu5055

最新推荐文章于 2023-04-03 10:17:21 发布

阅读量137

点赞数

原文链接：http://www.cnblogs.com/YouAreABug/p/10125272.html

版权

<style>

    #stage{
        width:400px;
        height:400px;
        border:1px solid black;
        perspective:1000px;
        
    }

    #box{
        position:relative;
        width:200px;
        height:200px;
        margin:100px;
        transform-style:preserve-3d;
        transform:rotateX(-30deg) rotateY(30deg);
        transition:transform 2s;
    }

    #box:hover{
        transform:rotateX(-30deg) rotateY(30deg) rotateZ(180deg);
    }
    
    #box > div{
        position:absolute;
        width:200px;
        height:200px;
        background-color:rgba(0,0,0,.1);
        border:1px solid gray;
        font-size:80px;
        text-align:center;
        line-height:200px;
    }
    
    #front{
        transform:translateZ(100px);
    }

    #back{
        transform:translateZ(-100px) rotateY(180deg);
    }
    
    #left{
        transform:rotateY(-90deg) translateZ(100px);
    }

    #right{
        transform:rotateY(90deg) translateZ(100px);
    }

    #top{
        transform:rotateX(90deg) translateZ(100px);
    }
    
    #bottom{
        transform:rotateX(90deg) rotateY(180deg) translateZ(100px);
    }    
</style>
</head>

<body>

<div id="stage">

    <div id="box">
　　　　

        <div id="front">1</div>
        <div id="back">2</div>
        <div id="left">3</div>
        <div id="right">4</div>
        <div id="top">5</div>
        <div id="bottom">6</div>     
    </div>

</div>

转载于:https://www.cnblogs.com/YouAreABug/p/10125272.html

aozhuangzhu5055

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-box立体图型

<style> #stage{ width:400px; height:400px; border:1px solid black; perspective:1000px; } #box{ position:relative;...
复制链接

扫一扫