纯css实现3D立方体

已于 2024-02-28 16:44:14 修改
阅读量3.4k 收藏 15
点赞数 5
文章标签： 纯css 3D立方体
于 2018-04-04 14:32:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhzzcc_/article/details/79816827
版权

   关注公众号，每天都能领外卖红包

​​​​​​​

纯css实现3D立方体特效，通过3D旋转和平移原理实现，话不多说直接贴代码

<html>
<head>
    <style type="text/css">
        body,html{
            margin: 0;
        }
        body{
            display: flex;
            align-items: center;
        }
        #parent{
            margin: 0 auto;
            width: 300px;
            height: 300px;
            position: relative;
            transform: rotate(45deg);
            transform-style: preserve-3d;
            animation: 10s spin linear infinite;
            transition: transform 1s linear;
        }
        #parent_new{
            left: calc(50% - 75px);
            width: 150px;
            height: 150px;
            position: absolute;
            transform: rotate(45deg) ;
            transform-style: preserve-3d;
            animation: 3s spin_new linear infinite;
            transition: transform 0.5s linear;
        }
        #parent>div{
            width: 300px;
            height: 300px;
            position: absolute;
            border: 5px solid #ccc;

        }
        #parent_new>div{
            width: 150px;
            height: 150px;
            position: absolute;
            border: 1px solid #ccc;
            background: black;
            opacity: 0.5;
        }
        #parent>div:nth-child(1){
            transform: translateZ(-150px);
            transition: transform 1s linear;


        }
        #parent>div:nth-child(2){
            transform:rotateY(-90deg) translateZ(150px) ;
            transition: transform 1s linear;
        }
        #parent>div:nth-child(3){
            transform:rotateY(-90deg) translateZ(-150px) ;
            transition: transform 1s linear;

        }
        #parent>div:nth-child(4){
            transform:rotateX(90deg) translateZ(150px) ;
            transition: transform 1s linear;

        }
        #parent>div:nth-child(5){
            transform:rotateX(90deg) translateZ(-150px) ;
            transition: transform 1s linear;

        }
        #parent>div:nth-child(6){
            transform: translateZ(150px);
        }

        #parent_new>div:nth-child(1){
            transform: translateZ(-75px);
            transition: transform 1s linear;

        }
        #parent_new>div:nth-child(2){
            transform:rotateY(-90deg) translateZ(75px) ;
            transition: transform 1s linear;
        }
        #parent_new>div:nth-child(3){
            transform:rotateY(-90deg) translateZ(-75px) ;
            transition: transform 1s linear;

        }
        #parent_new>div:nth-child(4){
            transform:rotateX(90deg) translateZ(75px) ;
            transition: transform 1s linear;

        }
        #parent_new>div:nth-child(5){
            transform:rotateX(90deg) translateZ(-75px) ;
            transition: transform 1s linear;

        }
        #parent_new>div:nth-child(6){
            transform: translateZ(75px);
        }
        @keyframes spin{
             0%{
                 transform: rotateX(0deg) rotateY(0deg);
             }
             100%{
                 transform: rotateX(360deg) rotateY(360deg);
             }

         }
        @keyframes spin_new{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }

        }

    </style>
</head>
<body>
<!--外层立方体-->
<div id="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

</div>
<!--内层立方体-->
<div id="parent_new">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>

效果图

hhzzcc_
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
HTML+CSS 3D立方体拆解动画
09-20
HTML+CSS 3D立方体拆解动画,值观视角拆解立方体；HTML+CSS实现.................................
Unity3D 点击物品交互动画制作——开箱子和关箱子
weixin_42339163的博客
06-19 4254
Unity3D 点击物品交互动画制作 最近在做三维场景漫游加交互的作业，记录一下鼠标交互动画的制作过程以免自己之后忘记了，中间因为不熟悉Unity的机制，出现了好多愚蠢的问题，希望其它新手遇到困难时看到这个能够稍微得到一些帮助。 因为是新手，所以操作过程可能很多不规范的地方，见谅见谅。 1.打开Animation界面，添加动画。 ctrl+6或是在window栏打开animation界面，点击模型，添加动画。 如果需要添加第二个动画（比如我要做一个打开动画，还要做一个关闭动画） 之后编辑动画，做好之后会在
CSS3实现3D立体效果
热门推荐
wonderful_life_mrchi的博客
09-02 9万+
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性，主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX,rotateY,rotateZ区别。 代码： .box{ width: 200px;height: 200
css 实现3D效果
蓝朽的小世界
04-03 5508
css实现3d效果
CSS实现立方体
weixin_44117089的博客
03-07 1292
Css制作立方体 这周在逆战班学习了过渡(transition)，2D动画(transform)，渐变(gradient)，以及3D动画特效。让我能够敲出很多很炫很好看的动画特效。今天想讲一下如何制作一个立方体。 首先，一个立方体需要六个面，所以我们可以用6个div放在一个大的div里，也可以用ul,li列表来制作。 <div class="wrap"> <div cla...
CSS 3D效果
weixin_68485297的博客
04-11 7408
一、动画效果 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。 2、animation动画属性 语法： animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
CSS3 3D炫酷旋转正方体特效
Infatuatedmonkey的博客
05-17 703
1.效果图 2.效果分析 这里主要用到了css3中的transform属性，和动画animation， 通过transform来拼装正方体，再通过动画让它旋转起来。 3.源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 3D选装魔方</title> <style> body{ /* 设置成黑色背景，使得
使用CSS画一个简单的立方体
cangyue_a的博客
03-13 894
使用CSS画个简单的立方体
用css制作旋转的立方体
Sharon0408的博客
04-18 1778
作者：安小轩 原文链接：https://juejin.cn/post/7086272341994536974 实现一个旋转的立方体，只需要用css的基本属性就可以实现。我们一起看看吧~ 一：transform 基本属性 transform可以实现元素的2D或3D转换，可以对元素进行旋转，缩放，移动，倾斜等。 基本属性有： 1. 移动 可以整个设置设置属性（translate）,也可以单个设置某个方向的转换 translate(x,y) 2D 转换 translate3.
css实现3D立方体旋转
02-19
css实现3D立方体旋转,纯css样式实现3D立方体动画效果。
纯CSS3实现3D立方体旋转动画特效代码
03-20
纯CSS3实现3D立方体旋转动画是一款3d魔方旋转立方体动画特效。
CSS3实现3D立方体旋转动画特效特效代码
03-20
CSS3实现3D立方体旋转动画特效是一款纯CSS3制作的3d旋转动画效果。
纯CSS3实现3D立方体旋转动画.zip
11-25
纯CSS3实现3D立方体旋转动画.zip
纯css3实现3d立方体自动旋转切换效果.rar
10-01
非常实用的特效代码，可以完美运行，可以二次修改！
图解迪杰斯特拉（Dijkstra）最短路径算法.docx
05-02
一、最短路径的概念及应用 在介绍最短路径之前我们首先要明白两个概念：什么是源点，什么是终点？在一条路径中，起始的第 一个节点叫做源点；终点：在一条路径中，最后一个的节点叫做终点；注意！源点和终点都只是相对 于一条路径而言，每一条路径都会有相同或者不相同的源点和终点。 而最短路径这个词不用过多解释，就是其字面意思： 在图中，对于非带权无向图而言， 从源点到终点 边最少的路径（也就是 BFS 广度优先的方法）； 而对于带权图而言， 从源点到终点权值之和最少的 路径叫最短路径； 最短路径应用：道路规划； 我们最关心的就是如何用代码去实现寻找最短路径， 通过实现最短路径有两种算法：Dijkstra 迪杰斯 特拉算法和 Floyd 弗洛伊德算法， 接下来我会详细讲解 Dijkstra 迪杰斯特拉算法；
基于faster-rcnn实现的行人检测算法python源码+项目说明+详细注释.zip
05-02
基于faster-rcnn实现的行人检测算法python源码+项目说明+详细注释.zip 使用方法： 1.编译安装faster-rcnn的python接口，代码在：https://github.com/rbgirshick/py 2.下载训练好的caffe模型，百度云链接为：https://pan.baidu.com/s/1w479QUUAwLBS2AJbc-eXIA，将下载的模型文件放到faster-rcnn文件夹的data/faster_rcnn_models文件夹中 3.将本项目中的文件夹替换安装好的faster-rcnn源码中的文件夹 4.使用tools文件夹下的测试脚本运行demo：python person_detect.py
jsp基于Web的可维护的数据库浏览器(源代码+论文+答辩PPT).zip
05-02
jsp基于Web的可维护的数据库浏览器(源代码+论文+答辩PPT)
node-v12.7.0-linux-ppc64le.tar.xz
最新发布
05-02
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
unet + pytorch 数据科学碗2018-python源码.zip
05-02
unet + pytorch 数据科学碗2018-python源码.zip
ios上css实现3d立方体旋转
05-18
在iOS上使用CSS实现3D立方体旋转可以通过使用CSS3的transform属性和perspective属性来实现。以下是一个简单的例子： HTML代码： ``` <div class="cube"> <div class="side">1</div> <div class="side">2</div> <div class="side">3</div> <div class="side">4</div> <div class="side">5</div> <div class="side">6</div> </div> ``` CSS代码： ``` .cube { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; transition: transform 1s; perspective: 800px; } .side { position: absolute; width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 48px; color: white; background: black; opacity: 0.8; border: 2px solid white; } .side:nth-child(1) { transform: rotateY(0deg) translateZ(50px); } .side:nth-child(2) { transform: rotateY(90deg) translateZ(50px); } .side:nth-child(3) { transform: rotateY(180deg) translateZ(50px); } .side:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); } .side:nth-child(5) { transform: rotateX(90deg) translateZ(50px); } .side:nth-child(6) { transform: rotateX(-90deg) translateZ(50px); } .cube:hover { transform: rotateX(360deg) rotateY(360deg); } ``` 在这个例子中，我们使用了一个包含6个面的div元素，并使用transform属性将其转换为3D立方体。然后，我们使用nth-child选择器来为每个面设置不同的旋转角度。最后，我们使用hover伪类选择器来实现鼠标悬停时的动画效果。 注意：该代码只能在支持CSS3的浏览器上运行，如Chrome、Safari等。在移动端设备上也可以使用该代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

hhzzcc_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值