两个立方体旋转

最新推荐文章于 2022-10-11 11:24:32 发布
最新推荐文章于 2022-10-11 11:24:32 发布
阅读量307 收藏 1
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxiaoxin1314/article/details/89930161
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D立方体</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            position: absolute;
            /*绝对定位后就不是块元素了，可以模拟*/
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            animation:aa 4s infinite linear;
            transform:rotate3d(1,1,0,-30deg);
            -webkit-transform-style:preserve-3d;

        }
        @-webkit-keyframes aa{
        	0%{
        		-webkit-transform:rotateY(-600deg) rotateX(300deg);
        		 /*translateX(200px)*/
        	}
        	100%{
        		-webkit-transform:rotateY(200deg) rotateX(-300deg);
        	}
        }
        .box1 .child1{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height:200px;
            font-size: 3em;
            position: absolute;
            transition:all 1s;
        }
        .box1 .child1:nth-child(1){
            background: rgba(45,145,230,0.4);
            /*transform:rotateX(90deg) translateZ(100px);*/
            transform:translateY(-100px) rotateX(90deg);
        }
        .box1 .child1:nth-child(2){
            background: rgba(0,145,100,0.4);
            /*transform:rotateY(-90deg) translateZ(100px);*/
            transform:translateX(-100px) rotateY(-90deg);
        }
        .box1 .child1:nth-child(3){
            background: rgba(100,45,230,0.4);
            /*transform:rotateY(90deg) translateZ(100px);*/
            transform:translateX(100px) rotateY(90deg);
        }

        .box1 .child1:nth-child(4){
            background: rgba(200,145,45,0.4);
            /*transform:rotateX(-90deg) translateZ(100px);*/
            transform:translateY(100px) rotateX(-90deg);
        }
        .box1 .child1:nth-child(5){
            background: rgba(150,0,70,0.4);
            transform:translateZ(100px);
        }
        .box1 .child1:nth-child(6){
            background: rgba(160,145,60,0.4);
            /*transform:rotateX(180deg) translateZ(100px);*/
            transform:translateZ(-100px) rotateY(180deg);
        }
          


        .box1:hover .child1:nth-child(1){
            background: rgba(45,145,230,0.4);
            /*transform:rotateX(90deg) translateZ(100px);*/
            transform:translateY(-200px) rotateX(90deg);
        }
        .box1:hover .child1:nth-child(2){
            background: rgba(0,145,100,0.4);
            /*transform:rotateY(-90deg) translateZ(100px);*/
            transform:translateX(-200px) rotateY(-90deg);
        }
        .box1:hover .child1:nth-child(3){
            background: rgba(100,45,230,0.4);
            /*transform:rotateY(90deg) translateZ(100px);*/
            transform:translateX(200px) rotateY(90deg);
        }

        .box1:hover .child1:nth-child(4){
            background: rgba(200,145,45,0.4);
            /*transform:rotateX(-90deg) translateZ(100px);*/
            transform:translateY(200px) rotateX(-90deg);
        }
        .box1:hover .child1:nth-child(5){
            background: rgba(150,0,70,0.4);
            transform:translateZ(200px);
        }
        .box1:hover .child1:nth-child(6){
            background: rgba(160,145,60,0.4);
            /*transform:rotateX(180deg) translateZ(100px);*/
            transform:translateZ(-200px) rotateY(180deg);
        }



        .box2{
            width: 100px;
            height: 100px;
            position: absolute;
            /*绝对定位后就不是块元素了，可以模拟*/
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            transform:rotate3d(1,1,0,0deg);
            -webkit-transform-style:preserve-3d;

        }
        .box2 .child2{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height:100px;
            font-size: 2em;
            position: absolute;
            
        }
        .box2 .child2:nth-child(1){
            background: rgba(45,145,230,0.4);
            /*transform:rotateX(90deg) translateZ(100px);*/
            transform:translateY(-50px) rotateX(90deg);
        }
        .box2 .child2:nth-child(2){
            background: rgba(0,145,100,0.4);
            /*transform:rotateY(-90deg) translateZ(100px);*/
            transform:translateX(-50px) rotateY(-90deg);
        }
        .box2 .child2:nth-child(3){
            background: rgba(100,45,230,0.4);
            /*transform:rotateY(90deg) translateZ(100px);*/
            transform:translateX(50px) rotateY(90deg);
        }

        .box2 .child2:nth-child(4){
            background: rgba(200,145,45,0.4);
            /*transform:rotateX(-90deg) translateZ(100px);*/
            transform:translateY(50px) rotateX(-90deg);
        }
        .box2 .child2:nth-child(5){
            background: rgba(150,0,70,0.4);
            transform:translateZ(50px);
        }
        .box2 .child2:nth-child(6){
            background: rgba(160,145,60,0.4);
            /*transform:rotateX(180deg) translateZ(100px);*/
            transform:translateZ(-50px) rotateY(180deg);
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="child1">top</div>
    <div class="child1">left</div>
    <div class="child1">right</div>
    <div class="child1">btm</div>
    <div class="child1">face</div>
    <div class="child1">back</div>
    <div class="box2">
    	<div class="child2">top</div>
        <div class="child2">left</div>
        <div class="child2">right</div>
        <div class="child2">btm</div>
        <div class="child2">face</div>
        <div class="child2">back</div>
    </div>
</div>
</body>
</html>

maxiaoxin1314
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebGL实现一个长方体包围盒随鼠标旋转缩放
02-17
通过一个长方体包围盒随鼠标旋转缩放具体实例，涵盖了WebGL中设置模型变换、视图变换、投影变换的技巧
c++两个立方体
qq_33281259的博客
09-24 449
c++初学，全局函数，类中属性、函数使用权限
3D立方体旋转动画
w1366352655的博客
12-05 877
3D立方体旋转动画 在线演示 本地下载 posted @ 2018-12-05 20:22 栖息地 阅读(...) 评论(...) 编辑 收藏
实现立方体旋转
weixin_34174322的博客
10-26 234
2019独角兽企业重金招聘Python工程师标准>>> ...
博客样式(旋转的立方体)
weixin_34013044的博客
08-18 145
代码: 1 <style> 2 /*最外层容器样式*/ 3 .wrap { 4 width: 100px; 5 height: 100px; 6 margin: 150px; 7 position: rela...
双层旋转立方体.rar
08-17
【描述】中提到的“内六外六一共十二张图片”意味着立方体的每一面都有一张图片，总共两个立方体，即内部和外部各有一个，每个立方体有六个面。这样的设计使得用户可以欣赏到多角度的图像展示，增强了交互性和视觉...
lifangti.rar_java立方体_立方体旋转
09-22
标题中的“lifangti.rar_java立方体_立方体旋转”指的是一个Java程序，它实现了立方体的旋转效果。这个程序可能是一个简单的图形用户界面（GUI）应用，用于演示3D图形的基本操作，特别是旋转。在描述中提到的“未用...
lft.rar_旋转立方体_立方体
09-14
顶点着色器处理立方体的几何信息，而片段着色器则负责计算像素颜色，这两个着色器可以用于设置每个面的颜色。 4. **颜色管理**：每个面的颜色可能存储在一个纹理或者直接在代码中定义。颜色可以使用RGB或RGBA格式...
opengl.rar_opengl 立方体_旋转
09-24
为了让立方体旋转，我们需要使用`glRotatef()`函数，它接受三个参数：旋转角度、旋转轴的x、y、z分量。在这里，可能是围绕X、Y和Z轴分别进行旋转，以便实现全方位的视觉效果。旋转角度可以通过时间或用户输入来动态...
CSS3 3D立方体旋转展示特效
06-24
在本文中，我们将深入探讨如何使用CSS3和GSAP（GreenSock Animation Platform）来创建一个3D立方体旋转展示特效。这个特效可以用于网站设计、交互式元素或动态图形展示，为用户带来丰富的视觉体验。 首先，让我们...
利用Python绘制三维的规则体（3维柱体、立方体和旋转棱柱）
m0_58024423的博客
04-25 3388
给大家分享几种用python绘制三维的几何体的方法
超级炫酷的3D旋转动态图——Python代码实现
weixin_46039719的博客
10-11 5792
今天这篇文章我准备了很久，但是运行出来很值得。属于散漫闲谈，毕竟涉及到一个浪漫的思想系统，故建议读者按目录次序逐一浏览，免得骤然跌入幽暗的迷宫找不到来时的路，它不足为你揭示全部问题的答案，但若能让人胸中升起一朵朵疑云，也未尝不会酿成晚霞斑斓的别一番景致，万一它居然给你带来了一场精神世界的苦雨，那就借机洗刷一下原来存放在那儿的“躺平”上的尘埃吧。或许，雨过云收，神驰的天地更清朗.......
Python之OpenGL笔记(11)：画一个立方体并自动旋转
dalong10的专栏
06-24 7174
一、目的 1、画一个立方体并自动旋转。 二、程序运行结果 三、画立方体   画一个立方体，需要八个顶点的数据。一个正方体如何画出来，需要一个面一个面的画，那么正方体有6个面，而每个面呢？是一个正方形，我们把正方形划分为两个三角形，这个三角形是opengl中最小的片元了。   立方体有六个面，每个面两个三角形，也就是12个三角形，每个三角形3个顶点，于是要定义36个顶点。   使用语句glDraw...
d3d11的转换-两个立方体发生旋转
x-2010的笔记
09-27 1342
这儿介绍在3D场景中如何转换一个几何体。转换利用矩阵，使用xna数学库提供的函数来实现。 转换 在d3d中使用4x4的矩阵来做转换。这是因为它们使用4维度，3空间，x，y，z和1个变化，这1个变化是用字母w表示，w一般为0或1.当想要转换一个物体时，获取它的3D向量，v=[x,y,z]，将w添加进去，因此就能够被4x4的矩阵乘了，所以它看起来像v=[x,y,z,1]。将w设为1，那就意
MATLAB——patch绘制长方体(cuboid)+长方体平移+长方体旋转
漫长IT路
09-16 9041
文章目录围绕着中心点旋转代码效果围绕原点旋转代码效果区别其他方法 围绕着中心点旋转 代码 新建一个脚本命名为：drawCuboid.m function [CuboidHandle, verts, facs] = drawCuboid(varargin) % Draw Cuboid % Draw a Cuboid using 8 rectangular faces. Places Cuboid...
css3 3d立方体两层嵌套式原地立体旋转
chen_0214的博客
08-06 970
一.重要的属性 需要用到的属性：transform-style: preserve-3d-将当前平面从2d（默认）转化为3d， transform: perspective(400px) = perspective: 400px，不过这里做正方体的时候，发现了这俩的不同， 用第二者的时候旋转之后侧边明显轴线发生了变化， 看的时候就变样了，感兴趣可以试试。区别还是挺明显，； 这里这俩属性写了之后，子元素就可以进行旋转(rotate)，平移(translate)操作，即可看到3d平面效果。 二.着手画立方体
用python画旋转正方形_Python 正方形螺旋绘制 + 圆形螺旋
weixin_39637059的博客
11-20 1363
1、正方形螺旋用遍历循环绘制，效果如下：1 #正方形螺旋.py23 from turtle import *4 setup(800,800,200,200)5 len=56 penup()7 sety(5)8 pendown()9 for i in range(100):10 seth(90*(i+1))11 fd(len*(i+1))正方形螺旋如果想隐藏箭头，最后加一行代码 ...
设置立方体旋转45°
最新发布
09-27
### 回答1： 要设置立方体旋转45°，需要执行以下步骤： 1. 在三维坐标系中定义立方体的顶点坐标。 2. 使用旋转矩阵对立方体的顶点坐标进行变换。旋转矩阵可以用来表示绕任意轴的旋转。 3. 在坐标系中绘制立方体。 下面是一个例子，使用OpenGL库在C++中实现立方体旋转45°的效果： ``` #include <GL/glut.h> #include <cmath> const int screenWidth = 640; const int screenHeight = 480; void init() { glClearColor(0.0, 0.0, 0.0, 0.0); glShadeModel(GL_FLAT); glEnable(GL_DEPTH_TEST); } void drawCube() { // 定义立方体的八个顶点坐标 GLfloat vertices[][3] = { {-1.0, -1.0, -1.0}, {1.0, -1.0, -1.0}, {1.0, 1.0, -1.0}, {-1.0, 1.0, -1.0}, {-1.0, -1.0, 1.0}, {1.0, -1.0, 1.0}, {1.0, 1.0, 1.0}, {-1.0, 1.0, 1.0} }; // 定义立方体的六个面 GLint faces[][4] = { {0, 1, 2, 3}, {1, 5, 6, 2}, {5, 4, 7, 6}, {4, 0, 3, 7}, {4, 5, 1, 0}, {3, 2, 6, 7} }; // 定义立方体面的颜色 GLfloat colors[][3] = { {1.0, 0.0, 0.0}, {1.0, 1.0, 0.0}, {0.0, 1.0, 0.0}, {0.0, 0.0, 1.0}, {1.0, 0.0, 1.0}, {1.0, 1.0, 1.0} }; glBegin ### 回答2： 要将一个立方体旋转45°，我们需要确定旋转的中心点和旋转的方向。假设立方体的中心点为原点O(0,0,0)。我们可以选择以某个轴为旋转轴，比如选择z轴为旋转轴。然后，我们可以考虑按逆时针方向旋转45°。 首先，我们可以确定立方体的八个顶点坐标。一个典型的立方体可以由六个面构成，每个面有四个顶点。我们可以将八个顶点的坐标表示为：A(-a, -a, a)，B(a, -a, a)，C(a, a, a)，D(-a, a, a)，E(-a, -a, -a)，F(a, -a, -a)，G(a, a, -a)，H(-a, a, -a)，其中a为立方体的边长。 然后，我们可以将立方体绕z轴旋转45°。对于每个顶点，我们可以使用旋转矩阵来计算旋转后的坐标。旋转矩阵是一个3x3的矩阵，其中每一行代表旋转后的坐标轴。对于逆时针旋转45°，旋转矩阵为： Rz = [cos(45°), -sin(45°), 0; sin(45°), cos(45°), 0; 0, 0, 1] 我们可以将每个顶点的坐标乘以旋转矩阵，得到旋转后的坐标。假设旋转后的坐标为A'(x', y', z')，则旋转后的八个顶点的坐标为： A' = Rz * A = (-a·cos(45°) - a·sin(45°), -a·cos(45°) + a·sin(45°), a) B' = Rz * B = (a·cos(45°) - a·sin(45°), -a·cos(45°) - a·sin(45°), a) C' = Rz * C = (a·cos(45°) + a·sin(45°), a·cos(45°) - a·sin(45°), a) D' = Rz * D = (-a·cos(45°) + a·sin(45°), a·cos(45°) + a·sin(45°), a) E' = Rz * E = (-a·cos(45°) - a·sin(45°), -a·cos(45°) + a·sin(45°), -a) F' = Rz * F = (a·cos(45°) - a·sin(45°), -a·cos(45°) - a·sin(45°), -a) G' = Rz * G = (a·cos(45°) + a·sin(45°), a·cos(45°) - a·sin(45°), -a) H' = Rz * H = (-a·cos(45°) + a·sin(45°), a·cos(45°) + a·sin(45°), -a) 这样，我们就得到了旋转后的立方体的八个顶点坐标。 ### 回答3： 要设置一个立方体旋转45°，首先需要明确旋转的是整个立方体还是其中的一个面。 如果是设置整个立方体旋转45°，可以按照以下步骤进行操作： 1. 首先确定旋转的中心点，可以是立方体的中心、某个顶点或者某个棱的中点等。假设我们选择立方体的中心作为旋转中心。 2. 然后选择旋转的轴线，可以是立方体的边或者对角线等。假设我们选择立方体的对角线作为旋转轴线。 3. 在xy平面上，以立方体的中心为原点建立坐标系。然后绘制一个与立方体对角线重合的轴线。 4. 将旋转轴线沿着z轴正向旋转45°，使得旋转轴线与x轴的夹角为45°。 5. 将立方体的每一个顶点，根据旋转轴线旋转45°。 如果是设置立方体中的一个面旋转45°，可以按照以下步骤进行操作： 1. 首先确定旋转的中心点，可以是立方体的中心、某个顶点或者某个棱的中点等。假设我们选择立方体的中心作为旋转中心。 2. 然后选择旋转的轴线，可以是立方体的边或者对角线等。假设我们选择立方体的一条棱作为旋转轴线。 3. 在xy平面上，以立方体的中心为原点建立坐标系。然后绘制一个与选定的旋转轴线平行的轴线。 4. 将旋转轴线沿着z轴正向旋转45°，使得旋转轴线与x轴的夹角为45°。 5. 将旋转轴线与选定的面相交的每一个顶点，根据旋转轴线旋转45°。 以上是两种常见的立方体旋转45°的方法，具体的操作取决于旋转的具体需求和条件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值