CSS的3D应用：绘制长方体

实现效果：

绘制步骤：

① 绘制6个面，2个正方形 + 4个长方形

② 旋转各个面的角度

③ 摆放各个面的位置

代码实现：

<div class="cuboid"><div class="bottom">下</div><div class="top">上</div><div class="right">右</div><div class="left">左</div><div class="back">后</div><div class="front">前</div>
</div>

cube样式中的transform属性并不影响长方体的绘制，即去除这两行代码也依然是完成了长方体的绘制。但由于绘制出来的长方体是从正前面展示的，因此看上去就只是二维平面的长方形而已，所以我采用transform旋转X和Y轴调整视角。

.cuboid {transform-style: preserve-3d; /* 使得所有子元素在3D空间中呈现 */transform: rotateX(-30deg) rotateY(30deg);
}
.cuboid div {width: 72px;position: absolute;opacity: 0.5; /* 半透明效果方便查看绘制情况 */display: flex;justify-content: center;align-items: center;
}
.back {height: 144px;background-color: #9900FF;transform: rotateY(180deg) translateZ(36px);}
.right {height: 144px;background-color: #333333;transform: rotateY(90deg) translateZ(36px);}
.left {height: 144px;background-color: #00FF99;transform: rotateY(-90deg) translateZ(36px);
}
.top {height: 72px;background-color: #0099FF;transform: rotateX(90deg) translateZ(36px);
}
.bottom {height: 72px;background-color: #FFCC00;transform: rotateX(-90deg) translateZ(108px);
}
.front {height: 144px;background-color: #FF5757;transform: rotateY(0deg) translateZ(36px);
}

CSS的3D应用：绘制长方体相关推荐

opengl绘制长方体线框_OpenGL绘图实例十之绘制3D机器人
综述通过上一节说的绘制3D图形基础,我们应该对绘制3D图形有了基本的认识,接下来我们就进行一个实例,绘制一个3D机器人. 本节我们要完成的任务有: 1.绘制一个仿真3D机器人(样式自选,参考例图), ...
027-使用 go 绘制长方体
注意,这也是过渡篇.本文会告诉你绘制 3D 图形的简单原理,并利用上节学习的 svg 的 polygon 指令绘制一个长方体. 1. 介绍最终的效果如下图: 图1 绘制长方体( 2×4×1 2 × ...
html css3d效果,html，css的3D变形
html,css的3D变形: 首先要了解一个概念:景深perspective 景深可以营造一个近大远小的效果,在IE.opera浏览器目前不支持这个属性,在safari和chrome里,要用-webk ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
HTML+CSS制作3D步数统计界面
HTML+CSS制作3D步数统计界面效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
【matplotlib笔记】3D图像绘制
3D图像绘制 3D线图 3D散点图 3D曲面图 z = x^2 + y^2 3D线图 # 3D线图绘制 import matplotlib.pyplot as plt import numpy as ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
php立方体相册源码,纯CSS实现3D的代码（正方体、动态立体图片册、平面的星空）...
本篇文章所说的内容是纯CSS实现3D的代码(正方体.动态立体图片册.平面的星空),代码都非常详细,有需要的朋友可以看一下. 一.正方体我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面 ...

CSS的3D应用：绘制长方体

实现效果：

绘制步骤：

代码实现：

CSS的3D应用：绘制长方体相关推荐

最新文章

热门文章