如何实现一个立方体

于 2021-02-24 16:15:44 发布
阅读量297 收藏
点赞数
分类专栏： html 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xue_daqian/article/details/114025616
版权

目标：

css+html 实现一个立方体

内容：

实现一个立方体类似于下面这样

在这里插入图片描述

HTML部分
先来一个大的div块作为基准
里面包含6个div 作为立方体的6个面 
<div id="cube">
	<div class="flat1">1</div>
	<div class="flat2">2</div>
	<div class="flat3">3</div>
	<div class="flat4">4</div>
	<div class="flat5">5</div>
	<div class="flat6">6</div>
</div>
css 先写外层的div 样式 也就是图片中的那个虚线的框 
#cube{
			margin: 200px auto;
			width: 300px;
			height: 300px;
			border: 1px dashed black;
			font-size: 80px;
			text-align: center;
			line-height: 300px;
			/* perspective: 1000px; */
		    //元素距离视图的距离，以像素计
			transition: 2s;
			transform: rotateY(-15deg) rotateX(10deg);
			transform-style: preserve-3d;
		}
再给所有的div设置样式 
#cube div{
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0;
			top: 0;
			transition: 2s;
			opacity: 0.5;
		}
给每一个单独设置样式 
	#cube .flat1{
			background-color: #008000;
			transform: translateY(-150px) rotateX(90deg);
			
		}
		#cube .flat2{
			background-color: #00ADE8;
			transform: translateY(150px) rotateX(-90deg);
			
		}
		#cube .flat3{
			background-color: #BEE7E9;
			transform: translateX(-150px) rotateY(90deg);
			
		}
		#cube .flat4{
			background-color: #ECAD9E;
			transform: translateX(150px) rotateY(-90deg);
			
		}
		#cube .flat5{
			background-color: #FF0000;
			transform: translateZ(150px);
			
		}
		#cube .flat6{
			background-color: #BEE7E9;
			transform: translateZ(-150px);
			
		}
如果想有鼠标划入动画的话也可以加上这一段样式 
#cube:hover{
			transform: rotateY(-55deg) rotateX(60deg);
		}
这就成功了
总体代码如下 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#cube{
			margin: 200px auto;
			width: 300px;
			height: 300px;
			border: 1px dashed black;
			font-size: 80px;
			text-align: center;
			line-height: 300px;
			/* perspective: 1000px; */
			//元素距离视图的距离，以像素计
			transition: 2s;
			transform: rotateY(-15deg) rotateX(10deg);
			transform-style: preserve-3d;
			//	表示所有子元素在3D空间中呈现
		}
		#cube:hover{
			transform: rotateY(-55deg) rotateX(60deg);
		}
		#cube div{
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0;
			top: 0;
			transition: 2s;
			opacity: 0.5;
		}
		#cube .flat1{
			background-color: #008000;
			transform: translateY(-150px) rotateX(90deg);
			//让第一个div像Y轴平移-150度 再按X轴旋转90度
			
		}
		#cube .flat2{
			background-color: #00ADE8;
			transform: translateY(150px) rotateX(-90deg);
			
		}
		#cube .flat3{
			background-color: #BEE7E9;
			transform: translateX(-150px) rotateY(90deg);
			
		}
		#cube .flat4{
			background-color: #ECAD9E;
			transform: translateX(150px) rotateY(-90deg);
			
		}
		#cube .flat5{
			background-color: #FF0000;
			transform: translateZ(150px);
			
		}
		#cube .flat6{
			background-color: #BEE7E9;
			transform: translateZ(-150px);
			
		}	
	</style>
	<body>
		<div id="cube">
			<div class="flat1">1</div>
			<div class="flat2">2</div>
			<div class="flat3">3</div>
			<div class="flat4">4</div>
			<div class="flat5">5</div>
			<div class="flat6">6</div>
		</div>
		
		
	</body>
</html>
我还就不信了啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
N圆最密堆积、最小外接正方形的matlab求解（二维、三维等圆Packing 问题）
hyhhyh21的博客
07-23 4181
N圆最密堆积、最小外接正方形、最小外接立方体的matlab求解（二维、三维等圆Packing 问题）
unity中实现圆柱，cube等以外的立方体 棱锥
qq_42497528的博客
06-03 1130
想做来在3D项目中做标记 直接上代码： using System.Collections; using System.Collections.Generic; using UnityEngine; using DG.Tweening; [RequireComponent(typeof(MeshRenderer), typeof(MeshFilter))] public class DrawTri...
PCL求点云外接立方体：AABB（轴对齐）和OBB（带方向）MomentOfInertiaEstimation
手口一斤
01-07 5189
本文主要展示一个样例，在PCL中求 AABB Axis-aligned bounding box轴对齐包围盒 和OBB Oriented bounding box 包围盒，从字面意思就能够理解意思；AABB有点像二维图像中的外接矩形，边与坐标轴是平行的，OBB像二维图像中的最小外接矩，能够比较好的包容整个点集。 在实际使用过程中可以根据自己需求来进行计算，例如：可以用在测量点云的宽度、深度等等，来设置一些算法的参数； 主要代码如下，具体说明看注释，足以。 #include <vector&gt
非规则物体测量
limingmin2020的博客
11-04 1155
根据单幅深度图，计算目标非规则物体的体积，即非规则物体的最小外接立方体。 首先读入深度图和相机内参，对深度图进行下采样并转为点云。进行平面拟合，拟合出地面方程，计算地面点云占总点云的比例。 若地面点云占比小于0.2，认为拍摄地面过小，测量失败，此时可以调整拍摄角度和距离，保证能拍到一定面积的地面； 若地面点云占比大于等于0.2小于等于0.5，则重新拟合平面，确定地面方程； 地面点云占比大于0.5，则认为第一次拟合的地面方程比较可靠，直接确定地面方程。 然后将原始分辨率深度图转为点云，根据地面方程确定地面点云
HTML5实现立方体及透视效果
沉浮乡土
09-15 9341
  通过对于HTML5的学习，实现一个具有透视效果的立方体盒子： 具体实现方法如下 我们需要先生成6个面，并添加样式 由于transform变换后会回到原始状态，因此必须添加3d变换效果 /*让子元素保留3d变换效果*/ transform-style: preserve-3d; 为了方便观看，再添加一个旋转效果 之后只需要将前后面分别平移，左右上下面移动再旋转就可以实现，比较重...
Unity 3d实现小球绕立方体转动
07-01
在Unity 3d中实现小球绕立方体转动是一个典型的3D空间运动模拟问题，它涉及到许多关键的技术点，包括对象的旋转、父子关系、坐标系统以及脚本控制。接下来，我们将深入探讨这些知识点。 首先，Unity 3D是基于C#的跨...
一个简单的正方体特效代码
03-20
"一个简单的正方体特效代码"这个项目，就是利用WebGL技术来创建一个基本的3D正方体展示效果。在本文中，我们将深入探讨WebGL的基础知识，以及如何构建一个简单的3D正方体。 WebGL全称为Web Graphics Library，它是...
C#实现的小立方体堆叠三视图
09-23
在本项目中，"C#实现的小立方体堆叠三视图"是一个使用C#编程语言编写的桌面应用程序，它利用了.NET Framework中的GDI+（Graphics Device Interface Plus）库来绘制几何图形，特别是立方体及其相关的三视图。...
c++计算一个立方体盒子体积
11-27
实验题目1：计算一个立方体盒子的体积 （1）程序功能简介 定义一个盒子（Box）类，数据成员包括长（length）、宽（width）、高（height）、体积（volume），能够使用构造函数对数据成员进行初始化，使用成员...
CSS3实现立方体
bide_tootight的博客
03-08 1149
SS3可以实现制作立方体，代码简单，只是涉及CSS3的一些变换、动画以及过渡属性，而且这些大家都见过，通过制作这个立方体可以让大家更好见识到CSS3的厉害。立方体是由六个面组成，分上下、左右和前后，考虑这些可以助我们更好的融入css3的代码接下来就是要写代码了：首先我们设一个大盒子cube，包裹住六个div：然后是css代码：.......................................
如何利用CSS3实现立方体
sinat_41660714的博客
11-13 228
CSS3中新增了过渡属性和3D效果，我们可以利用这个实现一个立方体，此处介绍两个属性： perspective，视距，即人眼到屏幕的距离，可以是元素的子元素获得近大远小地效果（潜台词：加给父元素不要加给自己，不然没效果） transform：preserve-3d（默认是flat，2D元素）；依旧是加给父元素，让子元素保留3D的位置。只有加了这个属性，元素才能真的算是3D元素 这时候就有疑问，...
利用CSS3做出立方体
cnjy_的博客
08-08 1万+
如何用css3做出立方体
咸鱼Maya笔记—创建NURBS基本体
咸鱼菌
05-06 2111
咸鱼Maya笔记—创建NURBS基本体NURBS概述创建NURBS基本体参数说明 NURBS建模技术是一种非常优秀的建模方式。Maya作为一款高级三维软件，支持用户采用NURBS建模方式进行模型的创建。与传统的多边形网格建模方式相比，NURBS建模方式可以更好地控制模型表面的曲线度，适合创建含有复杂曲线的曲面模型，模型造型也更为逼真和生动。 NURBS概述 NURBS（非均匀有理数 B 样条线）...
transform—3D立方体
weixin_30335353的博客
06-30 137
1、思路分析 第一步：首先需要一个大盒子，承载立方体的六个面； 第二步：立方体的六个面需要3D转化在特定的位置，拼接成一个立方体； 第三步：设置动画； 2、代码实现 第一步：创建div并且设置样式： <style> .box { width: 150px; height: 150px; back...
一个简单的CSS 正方体制作
一叶竹
02-20 8756
test.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/test.css"> </head> <body> <p >kaekeaeaaaaaaaaaaaaaaaaaaaeeee
css实现立方体效果
LLL_liuhui的博客
03-03 1051
效果如图： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&am
【数据挖掘笔记五】数据立方体技术
医疗影像检索
09-30 1万+
5.数据立方体技术 数据仓库系统在各种粒度上为多维数据的交互分析提供OLAP工具，OLAP工具使用数据立方体和多维数据模型对汇总数据提供灵活的访问，因此重点要关注数据立方体的技术。数据立方体技术包括数据立方体的计算方法方法和多维数据分析方法。 数据立方体技术对于数据挖掘也是有用的。多维数据挖掘是基于OLAP的数据分析与知识发现技术集成再一起的。多维数据挖掘，通过探查多维空间中的数据来搜索有趣的
移动立方体算法（MC）
热门推荐
wodexiaobaitu的专栏
12-08 1万+
该算法的基本思想是在体数据的每一个立方体单元中根据其八个顶点的数据值与给定数据值的关系在单元的12条边上寻找等值点，然后用三角形将等指点连成等直面。MC算法对感兴趣的等值面可以产生清晰的图像，但是提取的轮廓存在二义性，如果不认真选择，会造成绘制的连续表面上出现空洞。        移动立方体是面绘制的经典算法，也是所有基于体素的面绘制算法的共同基础。但是他产生的轮廓面具有二义性。移动四面体（MT
用threejs实现一个立方体
最新发布
03-20
可以使用以下代码实现一个立方体： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值