文档章节

实现立方体旋转

 课工场CC老师
发布于 2017/10/26 14:29
字数 579
阅读 9
收藏 0

 

 

 

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;

本文转载自:

粉丝 1
博文 81
码字总数 1512
作品 0
武汉
私信 提问
DirectX11--实现一个3D魔方(3)

前言 (2019/1/9 09:23)上一章我们主要讲述了魔方的旋转,这个旋转真是有毒啊,搞完这个部分搭键鼠操作不到半天应该就可以搭完了吧... (2019/1/9 21:25)啊,真香 有人发这张图片问我写魔方的目...

X_Jun
01/10
0
0
three.js 画一个旋转的立方体

试想一下,如果我们的周围的事物都是静止的,那将是多么无聊的一个世界;同样的,我们创建出的场景如果是静止的,只能满足我们一时的视觉体验,时间一长会让我们感觉到枯燥无聊,所以要营造好...

qq_37338983
2017/11/19
0
0
DirectX11--实现一个3D魔方(2)

前言 上一章我们主要讲述了魔方的构造和初始化、纹理的准备工作。目前我还没有打算讲Direct3D 11关于底层绘图的实现,因此接下来这一章的重点是魔方的旋转。因为我们要的是能玩的魔方游戏,而...

X_Jun
01/08
0
0
CSS 3D变形动画属性 之逆天立方体叠加动画

上一篇, juejin.im/post/5993d9… 把立方体的盒子搭出来之后,因为怕文章又臭又长(嗯,就是没有想好玩什么效果,偏不告诉你)关于动效没有做更多的处理,只做了一个绕Y轴旋转,这篇试着做几...

泱泱
2017/08/22
0
0
Direct3D 11 Tutorial 5: 3D Transformation_Direct3D 11 教程5:3D转型

概述 在上一个教程中,我们从模型空间到屏幕渲染了一个立方体。 在本教程中,我们将扩展转换的概念并演示可以通过这些转换实现的简单动画。 本教程的结果将是围绕另一个轨道运行的对象。 展示...

Zoctopus·Lian
2018/10/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
5
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
6
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
4
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部