制作一个正方体

最新推荐文章于 2024-02-28 18:49:47 发布
最新推荐文章于 2024-02-28 18:49:47 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 制作一个正方体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44547598/article/details/87363013
版权
本文介绍如何使用CSS3创建一个正方体。通过建立六个相同样式的面，并利用定位和旋转，使正方体的各个边相连。关键帧动画进一步增强了立体感。为观察效果，建议将body背景设为黑色。
摘要由CSDN通过智能技术生成
  1. 制作一个正方体首先需要建立正方体的6个面
    在这里插入图片描述
  2. 因为正方体的6个面都是相同的 ，为了简写代码 ，减少写代码的时间消耗 ，所以我用x类来写它们的样式
    在这里插入图片描述
  3. 因为正方体它是一个3D物体，所以需要用定位来制作它们
  4. 制作一个正方体，需要用css3中的旋转才能让人看得更立体 ，这里依次给大的div盒子里的子类 ，设置正方体需要的样式 ，为了让正方体的几个边连在一起，需要用translateZ来将它连在一起 ，并且设置正方体6个面的颜色，让正方体更有辨识度，通过旋转来讲正方体的几个面的位置调整
    在这里插入图片描述
  5. 为了让正方体的效果更加的明显 ，还需要用到关键帧来运行
    在这里插入图片描述
  6. 它的效果是下面这样的 ，因为有一个面的颜色是白色的 ，所以在浏览器上看的不是特明显 ，想看正方体全部效果可以把body的背景颜色设置成黑色 ，这样就可以看清楚正方体的全部效果
最低0.47元/天 解锁文章
³²⁶
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
计算机图形学(MFC)-三维图形变换(立方体)
03-24
资源内容：通过键盘按键，实现立方体的移动，伸缩，旋转，错切，投影等变换 语言：C++ 运行环境：Visual Studio 2013/更高版本
写一个正方体
weixin_30819163的博客
01-05 69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <meta name="page-view-size" content="640*530"> <meta http-equiv="Content-Type" content="tex...
html如何制作正方形,正方形的立方体怎么做 怎么用纸做十厘米的正方体?
weixin_39850167的博客
05-31 5226
怎样用卡纸制作正方体、长方体要10cm的，用纸做的那种。明天数学课要用找一张纸。纸张越大，可以制作出越大的正方体。在纸张的中央处，画出一个长方形，在长方形中分割出四个边长为2英寸的正方形。在上方第二个正方形的右边画出另一个正方形。在上方第二个正方形的左边画出另一个正正方体怎么做(详细，最好有图片)正方体是由6个正方形组成的，做出6个正方形即可拼出一个正方体，具体的做法步骤如下：用纸板做出6个大小完...
html如何制作正方体手工图,怎么用卡纸做正方体(做长方体的步骤图纸)
weixin_30075185的博客
06-26 3789
1、长方体:画出长方体的展开图【展开图:6个面,绝对的脸部相邻(如,左面和左面两头必需有1个前或后、上、上面)】,按线条剪下,将6个面黏上.2、正方体:同长方体,记住6个面1样大.http://jingyan.baidu.com/article/20095761826e0bcb0721b496.html这个是链接按这个折也能够失掉正方体画1个正方体展开图,相似10字架形,10字架上下两条边和左右两...
创建正方体
Nature_cworkplace的专栏
03-15 691
   MyCanvas.java  private Mesh createCube() throws Exception    {        short[] wallTextures = {            0,1, 1,1, 0,0, 1,0,//(x,y)           0,1, 1,1, 0,0, 1,0,            0,1, 1,1, 0,0, 1,0,
用opengl绘制一个旋转正方体.cpp
05-21
//这个函数其实就是对接下来要做什么进行一下声明 GL_MODELVIEW 模型视图 glLoadIdentity(); glPushMatrix();// 提供了相应的接口 { glRotatef(AngleX, 1.0f, 0.0f, 0.0f); glRotatef(AngleY, 0.0f, 1.0f, ...
利用CSS3的3D效果制作正方体
01-19
学会用CSS3的3D效果制作一个正方体，有助于增强我们对3D场景的旋转和位移属性的理解。下面的动态图就是利用3D旋转位移，结合动画效果制作的。感兴趣的同学可以在完成正方体的制作基础上，再去探究一下添加各种动画...
ps制作正方体.pdf
10-07
在Photoshop中制作正方体是一项基础但重要的技能，它涉及到图形设计中的透视、光影以及图层管理等多个知识点。以下是一些关键步骤和技术的详细解释： 1. **新建画布**：通过“文件”>“新建”命令创建一个新的工作...
计算机ps制作正方体.pdf
10-06
计算机ps制作正方体.pdf 本文档主要讲解了使用 Adobe Photoshop 软件制作正方体的步骤。制作正方体需要掌握一定的美学知识，如透视和设置光源等。掌握好了这些技术，我们就可以快速做出真实的立体图形。 首先，...
CSS3技术写的一个3D正方体
08-18
本教程将详细讲解如何利用CSS3和jQuery技术来实现一个交互式的3D正方体。 首先，让我们了解一下CSS3中的3D变换。CSS3的transform属性允许我们对元素进行2D和3D转换，如旋转、缩放、平移等。对于3D正方体，关键在于...
python绘制立方体的方法
01-20
本文实例为大家分享了python绘制立方体的具体代码，供大家参考，具体内容如下 #!/usr/bin/env python # This is (almost) a direct C++ to Python transliteration of # <VTK>/Examples/DataManipulation/Cxx/Cube.cxx from the VTK # source distribution, which shows how to manually create vtkPolyData # # A convenience function, mkVtkIdList
图形学绘制立方体并实现旋转
03-22
利用OPENGL图形学绘制一个立方体，并实现简单的旋转
Java语言实现鼠标拖动旋转立方体
03-15
Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体
设计一个魔方（六面）的程序 【微软面试100题 第四十四题】
weixin_34162695的博客
06-07 409
题目要求： 　　设计一个魔方（六面）的程序。 题目分析： 　　把魔方从正面看展开成一个平面，如图1所看到的。设计一个类。当中Spacexy[SPACE][LEN][LEN];中的SPACE为0~5表示六个面，每一个数字代表哪一面见图1.LEN为0~2。[LEN][LEN]表示某个面的3*3的9个格子。 　　类中的方法是依据展开的平面设计的，详细的某个面的某个...
制作简易的正方体
hefengshun的博客
08-24 182
1.第一张为HTML，第二张为css， 之中我们用到了3d效果，需注意 transform-style:preserve-3d; 必须写到父标签的样式中，否则不生效。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1..
Python绘制立方体
最新发布
corn1949的博客
02-28 648
Python绘制立方体
怎样快速画出一个正方体_学ug编程如何快速入门？
weixin_39693971的博客
11-23 3124
概述想学习UG的朋友，还不会使用UG，可以通过本文快速入门UG软件，绘制一个正方体。 快速上手UG的步骤1、点击电脑左下角的开始，打开开始菜单，并找到“NX”，如下图所示，点击打开UG NX软件。 学ug编程如何快速入门？2、依次点击“文件”/“新建”，打开新建对话框，如下图所示，选择“模型”选项卡，文件类型名称选择“模型”，输入文件名（第五步）,然后选择存储位置（第六步），最后点击确认，完成文件...
利用HTML制作一个旋转正方体
05-18
可以利用CSS3的3D变换来制作一个旋转正方体，具体代码如下： HTML部分： ```html <div class="cube"> <div class="side front"></div> <div class="side back"></div> <div class="side left"></div> <div class="side right"></div> <div class="side top"></div> <div class="side bottom"></div> </div> ``` CSS部分： ```css .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; animation: rotate 5s linear infinite; } .side { position: absolute; width: 200px; height: 200px; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #ccc; } .front { transform: translateZ(100px); } .back { transform: rotateY(180deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } ``` 解释一下CSS部分的代码： - `.cube`是外层容器，设置了宽高、位置和3D变换样式`transform-style: preserve-3d`，并且添加了旋转动画`animation`。 - `.side`是每个面的样式，设置了宽高、背景颜色和边框。 - `.front`表示正面，通过`translateZ`将其移动到正中间。 - `.back`表示背面，通过`rotateY`将其翻转到背面，并且也通过`translateZ`将其移动到正中间。 - `.left`表示左侧面，通过`rotateY`将其翻转到左侧，并且也通过`translateZ`将其移动到正中间。 - `.right`表示右侧面，通过`rotateY`将其翻转到右侧，并且也通过`translateZ`将其移动到正中间。 - `.top`表示顶部面，通过`rotateX`将其翻转到顶部，并且也通过`translateZ`将其移动到正中间。 - `.bottom`表示底部面，通过`rotateX`将其翻转到底部，并且也通过`translateZ`将其移动到正中间。 - `@keyframes rotate`是旋转动画，从0%到100%旋转360度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值