张士玉小黑屋

一个关注IT技术分享，关注互联网的网站，爱分享网络资源，分享学到的知识，分享生活的乐趣。

当前位置：首页 » 《随便一记》 » 正文

HTML+CSS+JS实现 ❤️3D建筑结构旋转特效❤️_java李阳勇的博客

23 人参与 2021年11月08日 16:23 分类 : 《随便一记》评论

点击全文阅读

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

html,
body {
    overflow: hidden;
    touch-action: none;
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
}

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    user-select: none;
    background: rgb(0, 0, 0);
    cursor: pointer;
}

HTML代码 :

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

<head>
    <meta charset="UTF-8">
    <title>3D建筑结构旋转特效</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <canvas></canvas>

    <!-- 单击以生成新结构 -->

    <script src="js/script.js"></script>

</body>

</html>

上面的script.js需要引入进来