简单前端页面设计（JS+CSS）——魔方变换

最新推荐文章于 2022-12-27 13:32:36 发布

空调下的快乐弟弟

最新推荐文章于 2022-12-27 13:32:36 发布

阅读量682

点赞数 1

分类专栏： CSS JS 文章标签： css3 js css web html

本文链接：https://blog.csdn.net/LUmayu/article/details/104899507

版权

魔方变换

*问题描述：想要实现一个3D魔方，魔方不停的在旋转，且魔方每个面都由9个部分组成，每个部分也有一定的动画效果

具体的要求请参见MOOC北京林业大学（Web前端开发课程）

*HTML代码+JS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魔方测试</title>
    <link type="text/css" rel="stylesheet" href="webstyle.css">
   
</head>
<body>
    <div id="container">
        <div class="mfbox">
            <div class="box-sheet top"></div>
            <div class="box-sheet bottom"></div>
            <div class="box-sheet left"></div>
            <div class="box-sheet right"></div>
            <div class="box-sheet font"></div>
            <div class="box-sheet behind"></div>
        </div>
    </div>
   
    <script>
       
var lists=document.querySelectorAll(".box-sheet")

最低0.47元/天解锁文章

空调下的快乐弟弟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
简单前端页面设计（JS+CSS）——魔方变换

魔方变换*问题描述：想要实现一个3D魔方，魔方不停的在旋转，且魔方每个面都由9个部分组成，每个部分也有一定的动画效果具体的要求请参见MOOC北京林业大学（Web前端开发课程）*HTML代码+JS代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录