zoukankan      html  css  js  c++  java
  • 实现立方体旋转

     

    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 {

             400px;

            height: 400px;

            transform-style: preserve-3d;

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

            /* left: 50%;

            margin-left: -200px; */

            top: 100px;

          }

          .slide {

             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;

  • 相关阅读:
    some tips
    ORA00847: MEMORY_TARGET/MEMORY_MAX_TARGET and LOCK_SGA cannot be set together
    Chapter 01Overview of Oracle 9i Database Perfomrmance Tuning
    Chapter 02Diagnostic and Tuning Tools
    变量与常用符号
    Chapter 18Tuning the Operating System
    标准输入输出
    Trace files
    DBADeveloped Tools
    Chapter 03Database Configuration and IO Issues
  • 原文地址:https://www.cnblogs.com/debug666/p/7783676.html
Copyright © 2011-2022 走看看