HTML魔方

最新推荐文章于 2024-05-14 22:45:25 发布
最新推荐文章于 2024-05-14 22:45:25 发布
阅读量2.8k 收藏 3
点赞数 4
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang_xiansen/article/details/68705119
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            color: yellow;
            margin: 100px auto;
            position: relative;
            transform-style:preserve-3d;
            transform: perspective(800px) rotateX(0deg) rotateY(0deg);
        }
         #box table{
             position: absolute;
             width: 100%;
             height: 100%;
            border-collapse: collapse;
            border: 1px solid #191919;
        }
        #box .front{
            background-color: rgb(186,0,0);
            transform: translateZ(150px);
        }
        #box .back{
            background-color: #17a92a;
            transform: translateZ(-150px);
        }
        #box .left{
            background-color: #e4e4e4;
            transform: translate(-150px, 0) rotateY(-90deg);
        }
        #box .right{
            background-color: #e4a219;
            transform: translate(150px, 0) rotateY(90deg);
        }
        #box .up{
            background-color: #1319a7;
            transform: translate(0,-150px) rotateX(90deg);
        }
        #box .down{
            background-color: #a70e82;
            transform: translate(0,150px) rotateX(-90deg);
        }
    </style>
</head>
<body>
<div id="box">
    <table  class="front" border>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    <table class="back" border>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="left" border>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="right" border>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="up" border>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="down" border>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

<script>
    var oBox=document.getElementById('box');

    var l=0;
    var t=0;
    oBox.οnmοusedοwn=function (ev){
        var oldX=ev.clientX-l;
        var oldY=ev.clientY-t;
        document.οnmοusemοve=function (ev){
            l=ev.clientX-oldX;
            t=ev.clientY-oldY;

            oBox.style.transform='perspective(800px) rotateX('+-t/5+'deg) rotateY('+l/5+'deg)';
        };
        document.οnmοuseup=function (){
            document.οnmοusemοve=null;
        };
        return false;
    };
</script>
</body>
</html>

晋级的菜鸟
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️
java李阳勇的博客
09-06 2191
效果演示： 代码目录： 主要代码实现： 部分CSS样式： background: url(../img/s3.jpg); background-size: 100% 100%; opacity: 0.8; transform: rotateY(90deg) translateZ(200px); } .box .box1 .left { background: url(../img/s4.jpg); background-s...
每天一个JavaScript小特效——会魔法的旋转魔方相册
weixin_62542181的博客
06-13 3592
用html、css、JavaScript做的小特效 实现功能： 点击下方图片可翻转到对应图片实现思路：魔方中用标签包含图片，方便用包裹，后面给ul添加3D模式便可进行翻折
2024年最新HTML+CSS实战操作旋转魔方(3)，最新2024年Web前端大厂面试经验
最新发布
2401_84619986的博客
05-14 392
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。但是，Flex布局就可以避免这种情况：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。以 Vue 为例，我整理了如下的面试题。
HTML5 3D魔方旋转拼图代码
06-24
HTML5 3D魔方旋转拼图代码是一款支持键盘上下左右方向键旋转拼图小游戏代码。
html制作3d魔方
03-26
此项目是本人随堂作业，运用html css实现了3d魔方的旋转，有兴趣的可以下载一看！！！
动态魔方照片3D.css资源文件
11-02
这个css文件专门用来生成动态的页面效果，与我们平常使用魔方一样，有着很好的表现性
html3D立方体魔方
08-03
本项目“html3D立方体魔方”正是基于这两者，利用WebGL技术来构建一个3D立体的魔方，用户可以自由地转动和操作这个虚拟的魔方。 首先，HTML5是超文本标记语言的新版本，它引入了多项新特性，包括Canvas画布，使得...
HTML5 魔方
12-05
HTML5魔方是一款基于HTML5技术开发的在线魔方游戏，它展示了HTML5在游戏开发领域的强大潜力。HTML5作为一种现代网页标记语言，其核心优势在于提供了丰富的网页交互功能和多媒体支持，使得开发者无需依赖Flash或其他...
html实现的3D魔方
01-02
HTML实现的3D魔方是一种基于Web技术的交互式图形应用，它利用HTML5、CSS3和JavaScript等技术，为用户提供了在浏览器中玩转3D魔方的体验。这个项目不仅展示了HTML5的潜力，还揭示了现代Web开发中的交互性和动态图形...
纯HTML5实现3D魔方动画源码
10-30
一款基于HTML5和CSS3实现的魔方立方体旋转动画，立方体每个面颜色不同，可以用鼠标转动魔方，观察每个面。进入的时候带非常酷的魔方转动展示动画，还可以自由转动每个魔方块，宛如在手上操作一般，操作性强，有需要...
使用HTML+CSS实现魔方转体
09-28
在本文中，我们将深入探讨如何使用HTML和CSS技术来实现一个动态的魔方转体效果。这个项目展示了前端开发中的创新应用，通过CSS3的3D变换和过渡效果，可以模拟出魔方的各个面旋转，给用户带来交互式的体验。 首先，...
HTML5 3D魔方旋转拼图代码.zip
07-04
脚本简介HTML5 3D魔方旋转拼图代码是一款支持键盘上下左右方向键旋转拼图小游戏代码。
3d魔方游戏h5（HTML5）
03-23
魔方游戏，具体代码，可以运行，具体效果图本博客有
html3d正方体
lzj_love_wx的博客
07-27 2388
2d特效 transform:translateX(); x轴平移 transform: translateY(); y轴平移 transform:translateZ(); z轴平移 transform:rotateX(); ...
HTML表白器---做一个魔方旋转的效果
风吹屁屁凉
08-08 5163
说明 魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释 我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。 代码： <!DOCTYPE html> <html> <h...
【HTML5】3D模型--百行代码实现旋转立体魔方
web开发自学
06-12 900
最近研究魔方的玩法，就突然想用HMTL5写一个魔方的模型，由于魔方是一个3D的立方体，这次就试着用HTML5写了一个简单的3D模型。 下面是测试链接和预览画面。 http://lufy.netne.net/lufylegend-js/lufylegend-1.4/Rubik/index.html 制作流程 首先你需要下载html5开源库件lufylegend-1.4.0 http://blog...
android grallery 炫酷3d图片,3D旋转炫酷相册(纯css实现)
weixin_42635064的博客
05-28 512
【实例简介】【实例截图】【核心代码】@charset "utf-8";*{margin:0;padding:0;}@keyframes move{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;}100%{transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg);}}body{...
抖音很火的立方体相册(HTML+CSS编写)
热门推荐
筱筱攻程师的博客
12-04 1万+
话不多说：先看图说话 首先立方体会不定向移动，鼠标移上去后会打开，具体效果看git图片 接下来呈上代码： 1.页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>一叶兰</title> <link rel="stylesheet" href...
仅使用HTML+CSS制作一个动态简版魔方
lhhllh.的博客
10-13 675
仅使用HTML+CSS制作一个动态简版魔方. 1.软件使用到HBuilder X . 2.使用到CSS3动画. …实现效果如下: … 其代码如下： 魔方 <style type="text/css"> * { padding: 0; margin: 0; } html,body { width: 100%; height: 100%; } body { perspective: 1000px; ba
html3d旋转魔方
08-24
要在HTML中创建一个旋转的魔方效果，你可以使用CSS 3D转换和动画来实现。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> .cube { width: 200px; height: 200px; position: relative; transform-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值