纯CSS3 实现3D魔方

最新推荐文章于 2021-07-04 21:11:09 发布
最新推荐文章于 2021-07-04 21:11:09 发布
阅读量327 收藏
点赞数
分类专栏： 前端 文章标签： css animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abraham_ly/article/details/111143946
版权

纯CSS3 实现3D魔方

1、思路

  1. 父盒子给子盒子开启立体空间，并开启透视，设置视距
  2. 子盒子设置摆放位置，与我们画的正方体类似，按照平面正方体每个面的拜访位置，我们通过旋转、平移达到摆放的效果
  3. 父盒子设置过渡
  4. 鼠标悬停到父盒子，子盒子做出的行为，分别向各自的方向扩散，并且侧面要有一定的旋转，为90°，使其达到我们想看到的打开效果
  5. 创建动画，0%-100%没问题，x轴和y轴旋转一周或者两周，即360°或者720°
  6. 大盒子调用动画，大盒子旋转，子盒子就跟着转了

2、源码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D魔方</title>
    <style>
        /* 清除浏览器内外边距 */
        
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background-color: #000000;
            /* 子元素开启三维立体空间 */
            transform-style: preserve-3d;
        }
        /* 公共样式开始了 */
        /* 设置大盒子的样式 */
        
        .photo {
            /* 固定定位 */
            position: fixed;
            /* 使其最后可以在显示器中央 */
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            /* 子元素开启三维立体空间 */
            transform-style: preserve-3d;
            /* 开启动画，10s执行完成，匀速，无限运行，自动返回 */
            animation: animation 20s linear infinite alternate;
        }
        /* 设置鼠标移动到img元素后行为的过度事件 */
        
        .photo1 img {
            transition: all 1s;
        }
        /* 公共样式结束了 */
        /* 外层魔方开始了 */
        
        .photo1 {
            /* 正方形 */
            width: 200px;
            height: 200px;
            /* 水平垂直居中 */
            margin: 200px auto;
        }
        
        .photo1 img {
            /* 正方形 */
            width: 200px;
            height: 200px;
            /* 绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.9;
            background-color: pink;
            border: 2px solid #333333;
        }
        /*设置正方形的6个面的位置 
            1、前后两个面的XY轴不动，只改变Z轴从自身向外扩散的距离(可视区为+，否则为-)
            2、左右两个面Y轴旋转90deg，呈竖着的状态，Z轴从自身向外扩散(可视区为+，否则为-)
            3、上下两个面X轴旋转90deg，呈平行的状态，Z轴从自身向外扩散(可视区为+，否则为-)
        */
        
        .photo1 #before {
            transform: translateZ(100px);
        }
        
        .photo1 #after {
            transform: translateZ(-100px);
        }
        
        .photo1 #top {
            transform: rotateX(90deg) translateZ(100px);
        }
        
        .photo1 #bottom {
            transform: rotateX(90deg) translateZ(-100px);
        }
        
        .photo1 #right {
            transform: rotateY(90deg) translateZ(100px);
        }
        
        .photo1 #left {
            transform: rotateY(90deg) translateZ(-100px);
        }
        /* 鼠标悬停在大盒子上，则出现的效果 
            1、分别向自身方向的Z轴向外移动
            2、自身的带有的XY轴数据继续正方向旋转90deg，使其视觉更有动态效果
        */
        
        .photo1:hover #before {
            transform: translateZ(160px);
        }
        
        .photo1:hover #after {
            transform: translateZ(-160px);
        }
        
        .photo1:hover #top {
            transform: rotateX(90deg) translateZ(160px);
        }
        
        .photo1:hover #bottom {
            transform: rotateX(90deg) translateZ(-160px);
        }
        
        .photo1:hover #right {
            transform: rotateY(90deg) translateZ(160px);
        }
        
        .photo1:hover #left {
            transform: rotateY(90deg) translateZ(-160px);
        }
        /* 外层魔方结束了了 */
        /* 内层魔方开始了 */
        
        .photo2 {
            width: 100px;
            height: 100px;
            margin: 250px auto;
        }
        
        .photo2 img {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.9;
            border: 2px solid #333333;
        }
        
        .photo2 #before {
            transform: translateZ(50px);
        }
        
        .photo2 #after {
            transform: translateZ(-50px);
        }
        
        .photo2 #top {
            transform: rotateX(90deg) translateZ(50px);
        }
        
        .photo2 #bottom {
            transform: rotateX(90deg) translateZ(-50px);
        }
        
        .photo2 #right {
            transform: rotateY(90deg) translateZ(50px);
        }
        
        .photo2 #left {
            transform: rotateY(90deg) translateZ(-50px);
        }
        /* 内层魔方结束了了 */
        /* 创建动画
            1、开始的时候在即原点
            2、结束时XY轴旋转。旋转720deg是为了多旋转一圈，并且速度能快一点
         */
        
        @keyframes animation {
            form {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(720deg);
            }
        }
    </style>
</head>

<body>
    <!-- 外层魔方开始了 -->
    <!-- 大盒子==>控制其旋转 -->
    <div class="photo1 photo">
        <!-- 照片==>摆放到合适的位置 -->
        <img src="./images/01.jpg" alt="" id="before">
        <img src="./images/02.jpg" alt="" id="after">
        <img src="./images/03.jpg" alt="" id="top">
        <img src="./images/04.jpg" alt="" id="bottom">
        <img src="./images/05.jpg" alt="" id="left">
        <img src="./images/06.jpg" alt="" id="right">
    </div>
    <!-- 外层魔方结束了 -->

    <!-- 内层魔方开始了 -->
    <!-- 大盒子==>控制其旋转 -->
    <div class="photo2 photo">
        <!-- 照片==>摆放到合适的位置 -->
        <img src="./images/01.jpg" alt="" id="before">
        <img src="./images/02.jpg" alt="" id="after">
        <img src="./images/03.jpg" alt="" id="top">
        <img src="./images/04.jpg" alt="" id="bottom">
        <img src="./images/05.jpg" alt="" id="left">
        <img src="./images/06.jpg" alt="" id="right">
    </div>
    <!-- 内层魔方结束了 -->
    <audio controls autoplay loop>
        <source src="./audio/弹钢琴的楠楠 - 【钢琴】windy hill（翻自 羽肿）.mp3" type="audio/mp3">
        <source src="./audio/弹钢琴的楠楠 - 【钢琴】windy hill（翻自 羽肿）.ogg" type="audio/ogg">
    </audio>
</body>s

</html>
御弟謌謌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS3D魔法——旋转魔方
m0_67619362的博客
05-05 701
3D旋转：rotate3d(x,y,z,deg) 透视：perspective 3D呈现：transfrom-style 三维坐标系： 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 X轴：水平向右（注意：X往右边是正值，往左边是负值） Y轴：垂直向下（注意：Y往下面是正值，往上面是负值） Z轴：垂直屏幕（注意：往外面是正值，往里面是负值） 我们看到的电脑屏幕的左上角等同于坐标中心原点，屏幕上边沿是x的正轴，屏幕左边沿是y的正轴。 [](()二、魔方图片 ==..
css实现3D魔方效果
linxuanasd的博客
06-21 152
效果展示 index.css index.html
纯CSS3制作简单的3D动画魔方
11-14
利用纯CSS3制作简单的3D 动画魔方，不到一百行代码就可以实现！
CSS3 3d环境实现立体 魔方效果代码
weixin_34111819的博客
09-08 416
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>魔方</title> <style type="text/css"> section{width: 10...
点点动画～画出懂你的3D魔方
weixin_34348111的博客
10-23 297
作者：首席填坑官∙苏南 来源：@IT·平头哥联盟公众号：honeyBadger8 前言   最近在写《点点动画系列》文章，上一期分享了&lt; 手把手教你如何绘制一辆会跑的车 &gt;，本期给大家带来是结合CSS3画出来的一个立体3d魔方，结合了js让你随心所欲想怎么转，就怎么转，这里是 @IT·平头哥联盟，我是首席填坑官∙苏南(South·Su)，我们先来看看效果，然后再分解它的实现过程吧 做有...
html js3d魔方,使用CSS3一个3D魔方详解~
weixin_39966130的博客
07-04 311
前言最近在写《动画点点系列》文章，上一期分享了< 手把手教你如何绘制一辆会跑车 >，本期给大家带来是结合CSS3画出来的一个立体3d魔方，结合了js让你随心所欲想怎么转，就怎么转，这里是 @IT·平头哥联盟，我是首席填坑官∙苏南(South·Su)，我们先来看看效果，然后再分解它的实现过程吧绘制过程：好吧，gif图看着好像有点不是很清晰，想在线预览的同学，可点击在线预览，废话不多扯了，...
纯css3 3D魔方翻转动画特效
09-08
【纯CSS3 3D魔方翻转动画特效】是一种利用现代浏览器支持的CSS3特性实现的视觉效果，它能够创建一个立方体结构，并通过变换属性实现各面的动态翻转，为用户带来立体感十足的交互体验。这种技术在网页设计、游戏界面...
纯CSS3 3D魔方翻转动画特效源码.zip
最新发布
11-20
2. **132686855306068480**：这个文件名看起来像是一个随机生成的数字序列，可能是源代码文件或者数据文件，它包含了实现3D魔方翻转动画的具体CSS3代码。在实际项目中，这样的文件通常是CSS或HTML文件，用于定义和...
纯CSS3彩色立体魔方动画特效
07-24
"纯CSS3彩色立体魔方动画特效"是利用CSS3的特性实现的一种创新的视觉效果，它通过纯CSS3代码创建出一个可以旋转的彩色立方体魔方，为网站添加动态和互动性。 首先，我们要理解CSS3中的关键帧动画（Keyframe ...
CSS3实现3D魔方翻转网页动画特效.zip
07-04
本项目"CSS3实现3D魔方翻转网页动画特效"正是利用了CSS3的3D变换特性，来制作出一个生动的3D魔方翻转效果。下面我们将深入探讨这个知识点。 首先，CSS3的3D变换允许我们在二维平面上创建出三维空间的效果。这主要...
css实现3d魔方效果
09-20
只用css和html实现3d魔方效果，代码简单，效果美观
纯css（css3）实现的3D场景布局（有动画）
05-13
效果是我在网上看到的，但我用纯css实现了一遍，3D场景布局，中间有一个3D的柱状图，镜头会围绕柱状图来回旋转，水平线下还会有倒影。
html实现的3D魔方
01-02
html实现的3D魔方，能够实现魔方的基本功能，可以根据需要自定义页面和功能
html制作3d魔方
03-26
此项目是本人随堂作业，运用html css实现了3d魔方的旋转，有兴趣的可以下载一看！！！
HTML5 3D魔方小游戏
07-28
HTML5 3D魔方小游戏 html+css+js实现的3D魔方小游戏源代码 魔方进行随机打乱，通过鼠标来操作3D魔方，并能对魔方复位时间进行记录，来挑战自己吧，看看你要多长时间html+css+js实现的3D魔方小游戏源代码 采用html+css+js，双击网页开始游戏，双击后3D魔方进行随机打乱，通过鼠标来操作3D魔方，并能对魔方复位时间进行记录，来挑战自己吧采用html+css+js,双击网页开始游戏,双击后3D魔方进行随机打乱,通过鼠标来操作3D魔方,并能对魔方复位时间进行记录,来挑战自己吧,看看你要多长时间,程序运行截图: 主要代码 CSShtml5 小游戏,html5小游戏,html5小游戏源码,html5小游戏代码,html5小游戏源代码,html5网页小游戏
纯CSS3做3D动画魔方
小白的编码屋
11-14 1975
之前本来就做过一次，忘了记录了。最近在做抽奖程序的时候看到那个界面就又想再做一次，于是作为小白的掌柜就再次做了一个很简单的3D动画魔方。主要用到的知识点是 相对定位(position: relative)与绝对定位(position: absolute) 浮动(float: left) transform-style： preserve-3d 动画(animation)的设置 旋转(rotate...
用CSS实现3D魔方动画旋转
Yvan_Lin的博客
04-30 3315
这篇博客是关于一个动态3D魔方的实现，主要分成两个部分，一个是3D魔方的制作，另一个是关于一个动画效果
css3--旋转的3D魔方
qq_37635519的博客
05-22 624
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="styleshee...
CSS3实现3D魔方效果
weixin_34163741的博客
03-06 426
代码： 图片路径自调试！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
使用javascript+css3实现的3D魔方动画特效解析
作者通过结合css3的3D特效和javascript，实现了一个随机打乱并按照预设步数恢复的魔方动画。" 在当前的互联网环境中，前端技术的发展已经超越了简单的数据展示，而是追求更丰富的用户体验和交互性。CSS3和HTML5的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

御弟謌謌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值