CSS3D模型

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

不变1024

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

阅读量705

点赞数 1

分类专栏： html/css CSS3D 文章标签： css3 3d html

本文链接：https://blog.csdn.net/liuqiao18434391822/article/details/60592403

版权

html/css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS3D

1 篇文章 0 订阅

订阅专栏

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); 
}

不变1024

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3D模型

html部分<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>3D模型</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="came
复制链接

扫一扫