JS实现旋转的魔方

最新推荐文章于 2022-08-14 11:27:19 发布
最新推荐文章于 2022-08-14 11:27:19 发布
阅读量547 收藏 3
点赞数
原文链接：http://www.cnblogs.com/wwj007/p/11251485.html
版权

  • js

<script>
    window.onload = function () {
        let cube = document.querySelector('.cube')
        let timer = null
        let x = 0; y = 0;
        function rotate() {
            cube.style.transform = 'rotateX(' + x + 'deg)' + '' + 'rotateY(' + y + 'deg)';
            x += 30
            y += 45
        }
        function stop() {
            clearInterval(timer)
        }
        clearInterval(timer);
        timer = setInterval(() => {
            rotate();
        }, 1000);

       //考虑兼容性
        var hiddenProperty = 'hidden' in document ? 'hidden' :
            'webkitHidden' in document ? 'webkitHidden' :
                'mozHidden' in document ? 'mozHidden' :
                    null;
        var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
        var onVisibilityChange = function () {
            if (!document[hiddenProperty]) {
                timer = setInterval(() => {
                    rotate();
                }, 1000);
                console.log(hiddenProperty);
            } else {
                clearInterval(timer)
            }
        }
       //不考虑兼容性
        document.addEventListener(visibilityChangeEvent, onVisibilityChange);
        // document.addEventListener("visibilitychange", function () {
        //     if (!document.hidden) {   //处于当前页面
                     rotate();
        //         timer = setInterval(() => {
        //             rotate();
        //         }, 1000);
        //         console.log('active');
        //     } else {
        //         clearInterval(timer);
        //         console.log('hidden');
        //     }
        // });
    }
</script>

  • html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="cube" onclick="stop()">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
</body>
</html>

  • css


<style>
    .cube {
        width: 400px;
        height: 400px;
        transition: all 3s;
        margin: 300px auto;
        /* 作用于所有3d转换的子元素 设置给父级 */
        /* perspective: 1000px; */
        /* transform: rotateX(30deg) rotateY(45deg); */
        /* 平面到立方  默认值:平面flat*/
        transform-style: preserve-3d;

        position: relative;
    }
    .front,
    .back,
    .left,
    .right,
    .top,
    .bottom {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 400px;
        position: absolute;
        opacity: 0.9;
        left: 0;
        top: 0;
    }
    .front {
        background-color: palevioletred;
        background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg');
        transform: translateZ(200px);
    }

    .back {
        background-color: yellow;
        transform: translateZ(-200px);
        background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg');
    }
    .left {
        background-color: pink;
        background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg');
        transform: rotateY(90deg) translateZ(-200px)
    }
    .right {
        background-color: yellowgreen;
        background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg');
        transform: rotateY(90deg) translateZ(200px)
    }
    .top {
        background-color: skyblue;
        background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg");
        transform: rotateX(90deg) translateZ(200px)
    }
    .bottom {
        background-color: orange;
        background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg');
        transform: rotateX(90deg) translateZ(-200px)
    }
</style>

转载于:https://www.cnblogs.com/wwj007/p/11251485.html

bit小兵
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单JS之旋转--记录一下平常会用到的简单功能，封装成函数方便以后使用
m0_48889470的博客
06-05 1095
function rotate(obj,direction,speed){//对象，方向，速度， var rotateVal=0 var dir=direction!==undefined?direction:true var spe=speed||0.1 this.run=()=>{ this.timer = setInterval(function() { rotateVal += 1; obj.style.transform = 'rotat.
每天一个JavaScript小特效——会魔法的旋转魔方相册
weixin_62542181的博客
06-13 3592
用html、css、JavaScript做的小特效 实现功能： 点击下方图片可翻转到对应图片实现思路：魔方中用标签包含图片，方便用包裹，后面给ul添加3D模式便可进行翻折
js实现魔方
tao__f的博客
09-10 519
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>魔方</title> <style> *{ paddi
用Javascript编写魔方程序
琼楼玉宇
03-29 2542
1、先测试下显示魔方（css 3D） （已完成） 2、滚动。（已完成） 3、打乱。（创建数组。。） 4、操作。 5、记录。 6、自动还原。 7、优化。 那就开始吧。 先初始化一个魔方： 然后，你可以开始旋转看看，rotateY(210deg);你会发现这不是我们想要的。 rotateY是以当前面的中心线为轴进行旋转，而我们希望这个面以立方体的中心线为轴进行旋转。 ...
three.js 如何制作魔方
11-20
因为之前的几节讲了一些数学方法，例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.js怎么制作一个魔方。 制作魔方主要运用坐标变换的知识，制作魔方的方法有很多，建议你先在大脑中构思，然后试着做一做，下面我将一种比较简单的方法。 制作出魔方各个方块的位置坐标（27个）的数组，然后制作出魔方各个面的材质（6个） 根据坐标和材质制作魔方的方块，并添加到一个组group 制作一个标志被选面的几何体（我是用球体），然后隐藏 使用THREE.Raycaster，给模型绑定事件，并记录选定的一些数据，将标志显示并放到合适的位置
JavaScript实现的3D旋转魔方动画效果实例代码
10-16
结合上述知识点，你可以创建一个交互式的3D旋转魔方，无论浏览器是否处于活动状态，都能保持一致的动画体验。这个实例不仅展示了JavaScript的动态能力，还展示了CSS3在现代Web开发中的强大功能。
html+css+js旋转魔方实现
最新发布
06-30
总结来说，"html+css+js旋转魔方实现"项目涵盖了HTML的结构设计、CSS的3D变换及视觉效果优化，以及JavaScript的交互处理和动态逻辑控制。通过这个项目，开发者可以深入理解这三大技术在实现复杂交互效果时的配合与...
js实现3D旋转相册
11-19
【JavaScript实现3D旋转相册】 在网页开发中，创建引人入胜的交互式用户体验是提升网站吸引力的关键。本文将介绍如何使用JavaScript来实现一个3D旋转相册的效果，让用户可以直观地浏览一系列图片，同时感受到立体的...
Three.js实现的魔方
05-17
- `js`：这个文件夹很可能包含了实现魔方旋转逻辑的JavaScript源代码，包括定义魔方结构、处理用户输入以及进行3D变换的函数。 - `README.md`：这是一个Markdown格式的文件，通常包含项目介绍、安装步骤、使用方法等...
js旋转魔方
03-04
旋转正方体（大立方体内有一个小立方体，每个面的图片需要重新引用），鼠标悬停有特效。
HTML5交互式3D魔方游戏代码
06-24
HTML5交互式3D魔方游戏代码是一款tree.js制作Google Doodle九宫格魔方3d翻转游戏源代码下载。
HTML5绘制3D魔方旋转动画.rar
05-27
HTML5绘制3D魔方旋转动画，纯CSS3绘制。
魔方代码 纯JS版
06-16
魔方代码 魔方 代码 GOOGLE 上很辛苦弄出来地。 已经去掉多余代码。已经很纯洁了。
魔方源码（基于threejs）
08-08
纯threejs 制作的魔方
js 3d魔方小游戏源码
ICode联盟
08-14 777
js 3d魔方小游戏源码，根据图标按钮转动魔方。
css+js 实现炫酷的魔方旋转（进阶版）
qq_44047479的博客
11-12 706
css+js 实现炫酷的魔方旋转（进阶版）
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...
h5实现旋转魔方相册
05-24
实现旋转魔方相册，可以考虑以下步骤： 1. 创建一个容器，用于放置魔方相册。 2. 将魔方相册拆分成 6 个面。每个面都是一个独立的图片或者容器。 3. 使用 CSS3 3D 变换（transform3d）和过渡（transition）属性，将每个面沿着魔方的边缘进行旋转。 4. 使用 JavaScript 监听用户的交互事件，例如鼠标点击、拖动等，根据用户的操作改变魔方相册的状态，从而实现旋转和翻转等效果。 下面是一个简单示例代码，实现了一个基本的旋转魔方相册： HTML 代码： ```html <div class="cube"> <div class="cube__item cube__item--front"></div> <div class="cube__item cube__item--back"></div> <div class="cube__item cube__item--right"></div> <div class="cube__item cube__item--left"></div> <div class="cube__item cube__item--top"></div> <div class="cube__item cube__item--bottom"></div> </div> ``` CSS 代码： ```css .cube { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transition: transform 1s; } .cube__item { position: absolute; width: 200px; height: 200px; background-size: cover; border: 1px solid white; } .cube__item--front { transform: translateZ(100px); background-image: url(front.jpg); } .cube__item--back { transform: translateZ(-100px) rotateY(180deg); background-image: url(back.jpg); } .cube__item--right { transform: rotateY(-90deg) translateZ(100px); background-image: url(right.jpg); } .cube__item--left { transform: rotateY(90deg) translateZ(100px); background-image: url(left.jpg); } .cube__item--top { transform: rotateX(90deg) translateZ(100px); background-image: url(top.jpg); } .cube__item--bottom { transform: rotateX(-90deg) translateZ(100px); background-image: url(bottom.jpg); } .cube:hover { transform: rotateX(360deg) rotateY(360deg); } ``` JavaScript 代码： ```javascript const cube = document.querySelector('.cube'); let isDragging = false; let startX, startY, currentX, currentY; cube.addEventListener('mousedown', (e) => { isDragging = true; startX = e.pageX; startY = e.pageY; }); cube.addEventListener('mousemove', (e) => { if (!isDragging) return; currentX = e.pageX; currentY = e.pageY; const dx = currentX - startX; const dy = currentY - startY; cube.style.transform = `rotateX(${dy * -0.2}deg) rotateY(${dx * 0.2}deg)`; }); cube.addEventListener('mouseup', () => { isDragging = false; }); ``` 这段 JavaScript 代码实现了鼠标拖动旋转魔方相册的功能。当用户按下鼠标左键时，记录下当前的坐标。当用户移动鼠标时，计算出鼠标移动的距离，根据距离改变魔方相册的旋转角度。当用户松开鼠标时，停止旋转。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值