CSS3D模型

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

weixin_33951761

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

阅读量110

点赞数

原文链接：http://www.cnblogs.com/lq1024/p/7593652.html

版权

html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>3D模型</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="camera">
            <div class="stage">
                <div class="cube up">up</div>
                <div class="cube down">down</div>
                <div class="cube left">left</div>
                <div class="cube right">right</div>
                <div class="cube font">font</div>
                <div class="cube after">after</div>
            </div>
        </div>
    </body>
</html>

css部分

.camera
{
    width:500px;
    height:500px;
    perspective:1000px; //相机距离
    perspective-origin:center center;//相机位置 
    /*border:1px dashed black;*/
}

.stage
{
    border:1px dashed blue;
    width:100%;
    height:100%;
    transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    //绕X/Y/Z轴旋转，度数你自己写
    transform-style:preserve-3d; //3D模型
}

.cube //6个面共同设置
{
    width:200px;
    height:200px;
    border:1px dashed blue;
    margin-top: 100px;
    margin-left: 100px;
    position:absolute;
}
.up
{
    background-color: red;
    transform:rotateX(90deg) translateZ(100px); //旋转,平移
}
.down
{
    background-color:blue;
    transform:rotateX(-90deg) translateZ(100px); 
}
.left
{
    background-color:green;
    transform:rotateY(-90deg) translateZ(100px); 
}
.right
{
    background-color:orange;
    transform:rotateY(90deg) translateZ(100px); 
}
.font
{
    background-color:rgb(237,21,162);
    transform:translateZ(100px); 
}
.after
{
    background-color:rgb(21,234,237);
    transform:rotateX(180deg) translateZ(100px); 
}