实现立方体旋转

最新推荐文章于 2022-07-18 10:13:44 发布
最新推荐文章于 2022-07-18 10:13:44 发布
阅读量107 收藏
点赞数
原文链接：http://www.cnblogs.com/CCDS01/p/7709658.html
版权
 
 
 

HTML部分：

<body class="body">

  <div class="rect-wrap">   <!-- //舞台元素，设置perspective，让其子元素获得透视效果。 -->

    <div class="container">    <!-- //容器，设置transform-style: preserve-3d，让其子元素在3D空间呈现 -->

        <div class="top slide">1</div>   <!-- //立方体的六个面 -->

        <div class="bottom slide">2</div>

        <div class="left slide">3</div>

        <div class="right slide">4</div>

        <div class="front slide">5</div>

        <div class="back slide">6</div>

    </div>

  </div>

</body>

CSS:

<style>

      .rect-wrap {

        position: relative;

        perspective: 2000px;

      }

      .container {

        width: 400px;

        height: 400px;

        transform-style: preserve-3d;

        transform-origin: 50% 50% 100px;  /* //设置3d空间的原点在平面中心再向Z轴移动200px的位置 */

        /* left: 50%;

        margin-left: -200px; */

        top: 100px;

      }

      .slide {

        width: 200px;

        height: 200px;

        position: absolute;

        background: #000;

        line-height: 200px;

        text-align: center;

        color: #fff;

        font-size: 30px;

        font-weight: bold;

      }

      .top {

        left: 100px;

        top: -100px;

        transform: rotateX(-90deg);

        transform-origin: bottom;

        background: red;

      }

      .bottom {

        left: 100px;

        bottom: -100px;

        transform: rotateX(90deg);

        transform-origin: top;

        background: grey;

      }

      .left {

        left: -100px;

        bottom: 100px;

        transform: rotateY(90deg);

        transform-origin: right;

        background: green;

      }

      .right {

        left: 300px;

        bottom: 100px;

        transform: rotateY(-90deg);

        transform-origin: left;

        background: yellow;

      }

      .front {

        left: 100px;

        top: 100px;

        transform: translateZ(200px);

        background: black;

      }

      .back {

        left: 100px;

        top: 100px;

        transform: translateZ(0);;

        background: blue;

      }

      @keyframes rotate-frame {

        0% {

            transform: rotateX(0deg) rotateY(0deg);

        }

        10% {

            transform: rotateX(0deg) rotateY(180deg);

        }

        20% {

            transform: rotateX(-180deg) rotateY(180deg);

        }

        30% {

            transform: rotateX(-360deg) rotateY(180deg);

        }

        40% {

            transform: rotateX(-360deg) rotateY(360deg);

        }

        50% {

            transform: rotateX(-180deg) rotateY(360deg);

        }

        60% {

            transform: rotateX(90deg) rotateY(180deg);

        }

        70% {

            transform: rotateX(0) rotateY(180deg);

        }

        80% {

            transform: rotateX(90deg) rotateY(90deg);

        }

        90% {

            transform: rotateX(90deg) rotateY(0);

        }

        100% {

            transform: rotateX(0) rotateY(0);

        }

      }

      .container{

        animation: rotate-frame 30s linear infinite;

      }

</style>

1.3维空间图

电脑屏幕中心为原点，横向为X轴，纵向为Y轴，人脸的方向为Z轴；
translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离
rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。

2.perspective属性
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

3.transform-style属性
transform-style: flat|preserve-3d; 默认值为flat,表示子元素以2D平面呈现；perserve-3d表示子元素以3D平面呈现

4.transform-origin属性
transform-origin 属性允许您改变被转换元素的位置（可以理解为元素以哪个位置为旋转原点）。
语法：

transform-origin: x-axis y-axis z-axis;

需要了解IT课程的同学，点击链接，QQ登录即可http://www.kgc.cn/index.php?tuin=7124，就可以获取免费学习视频，如果是用手机或者邮箱注册，记得输入邀请码7124，才可以获取新人奖励哦~~

转载于:https://www.cnblogs.com/CCDS01/p/7709658.html

dizi1857
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenGL旋转立方体的实现
上善若水
12-30 1万+
西电计算机图形学大作业
css旋转立方体教程,如何通过CSS3实现旋转立方体
weixin_28691741的博客
08-04 991
主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这...
旋转的立方体
qq_33680352的博客
03-31 84
旋转立方体 html部分 用ul来表示整个立方体,用li来表示立方体的六个面 <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
OpenGL绘制三维彩色立方体并实现自动旋转
热门推荐
JeremyZhao1998的博客
06-29 1万+
北京航空航天大学计算机学院 2020春季计算机图形学课程第二次作业，使用OpenGL绘制三维彩色立方体并实现自动旋转
Unity3D——学习分享（四）代码控制立方体的移动旋转
纸飞机
11-25 7608
CSS3的rotate与rotateX的顺序研究
zeromike
07-27 1498
转自：http://www.w3cfuns.com/article-5595079-1-1.html 文章真正出处：http://www.alloyteam.com/2012/11/the-order-of-roate-with-rotatex-problem/ 这篇是文章是转自腾讯的前端团队的，我本想直接转那篇，可是腾讯的这篇，有两个图显示不出来，难道是我打开的不对？       我起初...
WebGL实现立方体旋转动画
u014291990的博客
11-25 1634
立方体旋转动画 本文是WebGL电子书的1.10节内容 要通过WebGL渲染出立方体旋转的动画效果，你首要了解“帧”这个概念，比如你观看的视频其实就是一帧一帧的图片连续播放的效果，只要图片刷新的频率的不是太低，人的眼睛都不会察觉，一般30~60FPS就可以。 WebGL如何产生一帧一帧的图片，这个很简单，执行一次绘制函数gl.drawArrays()，WebGL图形系统就会通知GPU渲染管线处理顶...
css3实现立方体旋转
SiaEyre
05-13 1659
涉及知识点 css3转换transform transform-origin:x y z; 定义转换元素的位置 默认50% 50% 0 transform-style：flat | preserve-3d translate:从当前位置移动 translateX(px) | translateY(px) | translateZ(px) rotate：给定度数顺时针旋转 ro...
css3实现立方体旋转附源码
Izrj的博客
12-10 688
css3实现立方体旋转附源码
【无标题】＜纯HTML＞实现立方体旋转
qq_63197208的博客
07-18 188
html5利用transform实现立方体旋转
用6张图片实现立方体旋转效果
05-05
总之，用6张图片实现立方体旋转效果是一个结合了计算机图形学原理和编程技巧的项目。通过合理地调整和组合这些元素，我们可以创造出令人惊叹的视觉效果，同时也为学习更复杂的3D图形编程打下基础。
opengl实现立方体旋转
01-22
在"opengl实现立方体旋转"这个课题中，学生王雅宁的目标是使用OpenGL来创建一个三维的正方体，并使其能够旋转。下面将详细解释如何使用OpenGL实现这一目标。 首先，为了在OpenGL中绘制一个立方体，我们需要理解基本...
c# WPF实现立方体旋转变色效果
08-12
总之，C# WPF实现立方体旋转变色效果结合了3D建模、动画技术和颜色变换，展示了WPF强大的图形渲染能力。通过学习这个案例，开发者可以深入理解WPF的3D特性，并将其应用到更复杂的3D交互界面设计中。
jquery实现360度立方体3D旋转效果
06-10
9. **响应式设计**：考虑到不同设备的屏幕尺寸，立方体旋转效果应该具有响应式。这可能涉及到调整图片大小、旋转角度或动画速度，以适应不同分辨率和屏幕方向。 通过以上步骤，我们可以构建一个由36张图片组成的3D...
Src_oled_oled立方体_OLED旋转立方体_occur7i9_doctorioo_
10-01
标题中的"Src_oled_oled立方体_OLED旋转立方体_occur7i9_doctorioo_"表明这是一个关于使用OLED显示器实现立方体旋转的项目，可能是一个创新性的视觉效果展示，或者是教学示例。关键词"STM32 SPI OLED 旋转立方体...
目标检测中替代传统NMS的后处理方式.zip
09-05
目标检测（Object Detection）是计算机视觉领域的一个核心问题，其主要任务是找出图像中所有感兴趣的目标（物体），并确定它们的类别和位置。以下是对目标检测的详细阐述： 一、基本概念 目标检测的任务是解决“在哪里？是什么？”的问题，即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题： 分类问题：判断图像中的目标属于哪个类别。 定位问题：确定目标在图像中的具体位置。 大小问题：目标可能具有不同的大小。 形状问题：目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类： Two-stage算法：先进行区域生成（Region Proposal），生成有可能包含待检物体的预选框（Region Proposal），再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法：不用生成区域提议，直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列（YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等）、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例，YOLO将目标检测视为回归问题，将输入图像一次性划分为多个区域，直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征，使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层，通过卷积层提取图像特征，通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域，为人们的生活带来了极大的便利。以下是一些主要的应用领域： 安全监控：在商场、银行
软件工程课程设计报告-学生信息管理系统.doc
09-05
学生管理系统是一个教育单位不可缺少的部分，它的内容对于学校的决策者和管理者来说都至关重要,所以学生管理系统应该能够为用户提供充足的信息和快捷的查询手段。但一直以来人们使用传统人工的方式管理文件，这种管理方式存在着许多缺点，如：效率低、保密性差，另外时间一长,将产生大量的文件和数据，这对于查找、更新和维护都带来了不少的困难。在各大中小学校，用计算机管理学校的信息已经越来越普遍了。用计算机不但可以提高工作效率，而且还节省了许多人力物力，增强了学校资料的安全性。提高了学校的管理能力，为此，用计算机来管理学校的信息，是非常必要的。
51报名管家小程序（源码）.zip
最新发布
09-05
51报名管家小程序（源码）.zip
Axelrod-3.1.0-py2.py3-none-any.whl.zip
09-05
Axelrod-3.1.0-py2.py3-none-any.whl.zip
CSS3实现3D立方体旋转效果详解
本教程重点讲解了如何利用CSS3的3D变换实现立方体旋转效果，以下是详细的知识点： 1. **3D变换基础**： - **perspective（透视）**：定义了观察者到3D元素的距离，影响3D元素的远近感。设置perspective属性可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值