css 3d 魔方模型

最新推荐文章于 2022-12-10 23:55:41 发布
最新推荐文章于 2022-12-10 23:55:41 发布
阅读量154 收藏
点赞数
分类专栏： html-css-js 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44002250/article/details/119987859
版权

效果：
在这里插入图片描述
有空再把它做成真正可以扭的魔方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d魔方</title>
    <style>
        .parent {
            width: 700px;
            height: 700px;
            margin: 0 auto;
            position: relative;
            perspective: 500px;
        }
        .big {
            position: absolute;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            /*animation: rotate 3s linear infinite;*/
        }
        .bigBig {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
        }
        .color {
            position: absolute;
            top:  300px;
            left: 300px;
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
        }

        .color div {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            border: white solid 1px;
            opacity: 0.7;
        }
        .color div:nth-child(1){
            transform-origin: left;
            background-color: green;
            transform: rotateY(-90deg);
        }
        .color div:nth-child(2){
             transform-origin: right;
            background-color: blue;
             transform: rotateY(90deg);
         }
        .color div:nth-child(3){
            background-color: red;
            transform-origin: top;
            transform: rotateX(90deg);
        }
        .color div:nth-child(4){
            background-color: pink;
             transform-origin: bottom;
             transform: rotateX(-90deg);
         }
        .color div:nth-child(5){
            background-color: white;
            transform: translateZ(100px);
        }
        .color div:nth-child(6){
            background-color: yellow;
        }


        .big .color:nth-child(1){

        }
        .big .color:nth-child(2){
            transform: translateX(-100px);
        }
        .big .color:nth-child(3){
            /*animation: rotate 3s linear infinite;*/
            transform: translateX(100px);
        }
        .big .color:nth-child(4){
            transform: translateY(-100px);
        }
        .big .color:nth-child(5){
            transform: translateY(100px);
        }
        .big .color:nth-child(6){
            transform: translate3d(100px,100px,0px);
        }
        .big .color:nth-child(7){
            transform: translate3d(100px,-100px,0px);
        }
        .big .color:nth-child(8){
            transform: translate3d(-100px,100px,0px);
        }
        .big .color:nth-child(9){
             transform: translate3d(-100px,-100px,0px);
         }

        .bigBig .big:nth-child(1){
            transform: translateZ(-150px);
            transition: all 3s;
        }
        .bigBig .big:nth-child(2){
            transform: translateZ(-50px);
        }
        .bigBig .big:nth-child(3){
            /*animation: rotate 3s linear infinite;*/
            transform: translateZ(50px);
        }




        @keyframes rotate {
            0%{
                transform: rotateX(0deg);
            }

            100% {
                transform: rotateX(360deg);
            }
        }

    </style>

</head>
<body>
<div class="parent">
    <section class="bigBig">
        <section class="big">
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
        </section>
        <section class="big">
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
        </section>
        <section class="big">
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="color">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
        </section>
    </section>


</div>
</body>
</html>
@LitterFisher
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3魔方3d翻滚效果
08-30
创建一个基础的魔方结构，我们需要多个div元素来代表魔方的各个面，然后通过CSS3的盒模型（box-sizing）和定位（positioning）来确保它们正确地堆叠在一起。例如： ```html <div class="face front"></div> ...
樱花雨3d魔方旋转相册
最新发布
09-17
这个项目的核心在于通过HTML5、CSS3以及JavaScript等技术实现3D魔方的动态旋转和图片展示，为用户带来视觉上的独特体验。下面我们将深入探讨这个项目涉及到的多个IT知识点。 1. **HTML5**: HTML5是超文本标记语言的...
css3d模型做法,CSS3 3D房屋模型
weixin_35110266的博客
08-03 485
CSS语言：CSSSCSS确定.container {width: 250px;height: 250px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}#cube {width: 100%;height: 100%;position: absolute;transform-style: preserve-3d...
css3d模型做法,CSS3
weixin_42505032的博客
08-03 226
创建3D模型*{padding:0;margin:0;}li{list-style:none;}body{font-size:12px;background:#fff;font-family:'Helvetica Neue',Arial,sans-serif;-webkit-text-size-adjust: none;color:#333;}.box{margin:100px auto;widt...
CSS 实现一个3d魔方
苏苏就是小苏苏的博客
12-10 1125
👏CSS 实现一个3d魔方，速速来Get吧~
Web前端从初级到高手之路
12-28
本套课程分为UI设计基础课程、Web前端通用代码与UI交互实现、移动端Web前端与UI实现三个大章节，课程讲述UI设计、Flash、交互设计、HTML5、CSS3、JavaScript等web前端技术。凡是购买本套课程的学员，可以加QQ群： 152364681，专业讲师进行在线答疑与指导，学不懂有疑问，随时问，永久服务，并赠送海量web前端练习素材，名师一路陪伴，让学员真正成为一名优秀的web前端工程师。
css实现3d立体魔方
w_xiaolin的博客
02-03 3710
今天来做一个简单的3d魔方 先看效果图吧！把这个看会了，一些网上的3d的相册你就都会了 一、我们先准备好们的html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>3d立体魔方</title> <meta charset="UTF-8...
抖音超火❤ html+css+js 实现炫酷3D魔方
12-29
【HTML+CSS+JS实现炫酷3D魔方】是一个热门话题，特别是在Web前端开发领域。这个项目结合了三种核心技术，构建了一个引人注目的互动3D效果，它在抖音等社交媒体平台上广受关注。接下来，我们将深入探讨这些技术如何...
css魔方效果
03-27
在CSS世界中，"css魔方效果"是一种利用CSS3的3D变换和定位技术来创建的动态视觉效果。这个效果通常表现为一个可以旋转的立方体，每面都着有不同的颜色或内容，用户可以通过鼠标交互来改变立方体的展示角度，从而看到...
html3D立方体魔方
08-03
在这个3D魔方中，顶点着色器可能用于计算每个顶点在3D空间中的位置，而片段着色器则负责确定每个像素的颜色，使得魔方看起来有深度和立体感。 为了实现魔方的旋转，JavaScript会更新WebGL上下文中的模型视图矩阵或...
CSS3实现3D魔方动画特效.zip
07-04
CSS3实现3D魔方动画特效是一款使用CSS3的3D视觉魔方特效，旋转魔方动画。
CSS:盒子3D模型
golden_wheat
12-08 1571
CSS:盒子3D模型 从上到下分为5层 1、border 2、content+padding 3、background-image 4、background-color 5、margin
CSS3D模型
不变1024
03-06 708
html部分<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3D模型</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="came
css3制作3D立体模型
qq_42158442的博客
10-19 1205
 代码跟注释都在里面了！想知道是什么效果不妨自己试试！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; @-webkit-keyframes domove{
css3动画效果和3D模型
热门推荐
nuoWei_SenLin的博客
03-18 1万+
今天了解了css3的动画渐变效果，如果我们要对页面中的某个元素的样式进行变化，就不用js或jquery苦苦的写代码了，直接用css3的这个transition这个属性就ok，方便快捷，下面请看demo。一、动画效果我要对某个div操作，例如：当鼠标移入div中，改变其width、height和background，如果不使用transition属性而直接用hover的话，会使页面非常死板、生硬，如...
css3 3D魔方
喜欢文学的程序员
02-24 2086
github地址:https://github.com/lishuai336/3D-mf/tree/master/3Dmf css3强大的功能让人叹为观止，我们工作中接触到的都是皮毛，要想真正提升技术跟进前端的技术发展，靠自学才是出路。不过我倒是觉得学习是一件快乐的事情，在快乐中学习会事半功倍。 最近看到了旋转的魔方小demo，便津津有味的琢磨起来，效果如图。对了，普及一下：在css3D...
如何用CSS3+HTML5绘制一个3x3的3D魔方？
luojiandecsdn的博客
01-21 6926
CSS3真的很强大，不仅能实现动画，还能绘制2D、3D图形。主流浏览器FIrefox、Chrome、Opera、Safari都能支持，遗憾的是市场占有率仍然很高的IE浏览器却无法支持。具体可查看CSS3参考手册点击打开链接     模仿做了一个简单的3D魔方，给大家分享一下。 HTML代码： Margic Cube
CSS 制作3D魔方 爱的魔方给女(男)朋友一个感动
记录编程生活
08-24 6750
首先上效果图： 是不是很炫呢！ 没有？ 好吧！只能发个大招了，来看下动态的效果吧 http://www.meipai.com/media/395929464 效果还算可以吧，相信只要你用心，你会做出更炫的效果。把你们的生活点滴记录在上面，你的他/她肯定会非常感动的。 好了，是不是已经迫及待的想看看到底是怎么实现的了！ 下面先附上HTML的代码
点点动画～画出懂你的3D魔方
weixin_34348111的博客
10-23 292
作者：首席填坑官∙苏南 来源：@IT·平头哥联盟公众号：honeyBadger8 前言   最近在写《点点动画系列》文章，上一期分享了&lt; 手把手教你如何绘制一辆会跑的车 &gt;，本期给大家带来是结合CSS3画出来的一个立体3d魔方，结合了js让你随心所欲想怎么转，就怎么转，这里是 @IT·平头哥联盟，我是首席填坑官∙苏南(South·Su)，我们先来看看效果，然后再分解它的实现过程吧 做有...
css3 3d魔方鼠标移入放大
07-14
要实现CSS3 3D魔方鼠标移入放大的效果，你可以使用CSS3的transform属性结合鼠标事件来实现。下面是一个简单的示例代码： HTML: ```html <div class="face front">Front <div class="face back">Back ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值