Attribute profile

The perspective properties

The Perspective property specifies the distance between the observer and the z = 0 plane, giving perspective to elements with three-dimensional position transformations.

The transform – style property

The transform-style property sets whether the child elements of an element transform in 3D space or in a plane.

TranslateZ () function

Changes the position of the element’s Z-axis in 3d space.

RotateX (), rotateY()

RotateX () rotates around the X-axis. RotateY () rotates around the Y-axis.

Animation attributes

  1. Add an animation to the element.
  2. through@keyframesSet the animation.

Set the stage

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style type="text/css">
      .main {
        width: 1000px;
        min-height: 600px;
        margin: 50px auto;
        background-color: #f0f0f0;
        box-shadow: inset 0 0 3px rgba(0.0.0.0.35);
        position: relative;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 3D stadia perspective */
        -webkit-perspective: 800px;
        perspective: 800px;
      }

      .container {
        width: 200px;
        height: 200px;
        position: relative;
        transform: rotateX(30deg);

        /* Add animation */
        animation: rotateAn 5s linear infinite;
        -webkit-animation: rotateAn 5s linear infinite;

        /* Change the child element to 3D transform */
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
      }
    </style>
  </head>
  <body>
    <! -- -- -- > stage
    <div class="main">
      <! -- -- -- > container
      <div id="container" class="container">
        <!-- 内 -->
        <div class="withinBox">
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
        </div>
        <! Outside -- - >
        <div class="outsideBox">
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
          <div class="inner"></div>
        </div>
      </div>
    </div>
  </body>
</html>
Copy the code

rendering

Create a frame,

./ * * /
      .withinBox {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;

        /* Change the child element to 3D transform */
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
      }
      .withinBox .inner {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .withinBox .inner:nth-child(1) {
        background-color: #ccffff;
        / * * /
        transform: translateZ(50px);
        -webkit-transform: translateZ(50px);
      }
      .withinBox .inner:nth-child(2) {
        background-color: #ccccff;
        / * * / on the back
        transform: rotateX(180deg) translateZ(50px);
        -webkit-transform: rotateX(180deg) translateZ(50px);
      }
      .withinBox .inner:nth-child(3) {
        background-color: #99ffff;
        / * * / below
        transform: rotateX(-90deg) translateZ(50px);
        -webkit-transform: rotateX(-90deg) translateZ(50px);
      }
      .withinBox .inner:nth-child(4) {
        background-color: #99ffcc;
        / * * /
        transform: rotateX(90deg) translateZ(50px);
        -webkit-transform: rotateX(90deg) translateZ(50px);
      }
      .withinBox .inner:nth-child(5) {
        background-color: #ffccff;
        Left / * * /
        transform: rotateY(-90deg) translateZ(50px);
        -webkit-transform: rotateY(-90deg) translateZ(50px);
      }
      .withinBox .inner:nth-child(6) {
        background-color: #ffcccc;
        / * right * /
        transform: rotateY(90deg) translateZ(50px);
        -webkit-transform: rotateY(90deg) translateZ(50px);
      }

      @keyframes rotateAn {
        0% {
          transform: rotateX(30deg) rotateY(0deg);
          -webkit-transform: rotateX(30deg) rotateY(0deg);
        }
        100% {
          transform: rotateX(30deg) rotateY(360deg);
          -webkit-transform: rotateX(30deg) rotateY(360deg); }}...Copy the code
  • Notice here that the degree of rotation and z-axis movement of each side is just enough to form a square
  • Here added animation effect can be more intuitive to view the effect.

rendering

Create a frame

      The casing outside the / * * /
      .outsideBox{
        width: 200px;
        height: 200px;
        position: absolute;

        /* Change the child element to 3D transform */
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
      }
      .outsideBox .inner{
        width: 200px;
        height: 200px;
        position: absolute;
        background: #fff;
        border:1px solid #ccc;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.2;
      }

      .outsideBox .inner:nth-child(1) {
        background-color: #ccffff;
        / * * /
        transform: translateZ(100px);
        -webkit-transform: translateZ(100px);
      }
      .outsideBox .inner:nth-child(2) {
        background-color: #ccccff;
        / * * / on the back
        transform: rotateX(180deg) translateZ(100px);
        -webkit-transform: rotateX(180deg) translateZ(100px);
      }
      .outsideBox .inner:nth-child(3) {
        background-color: #99ffff;
        / * * / below
        transform: rotateX(-90deg) translateZ(100px);
        -webkit-transform: rotateX(-90deg) translateZ(100px);
      }
      .outsideBox .inner:nth-child(4) {
        background-color: #99ffcc;
        / * * /
        transform: rotateX(90deg) translateZ(100px);
        -webkit-transform: rotateX(90deg) translateZ(100px);
      }
      .outsideBox .inner:nth-child(5) {
        background-color: #ffccff;
        Left / * * /
        transform: rotateY(-90deg) translateZ(100px);
        -webkit-transform: rotateY(-90deg) translateZ(100px);
      }
      .outsideBox .inner:nth-child(6) {
        background-color: #ffcccc;
        / * right * /
        transform: rotateY(90deg) translateZ(100px);
        -webkit-transform: rotateY(90deg) translateZ(100px);
      }

      /* Expand effect */
      .outsideBox:hover .inner:nth-child(1) {
        / * * /
        transform: translateZ(200px);
        -webkit-transform: translateZ(200px);
        opacity: 0.8;
        
      }
      .outsideBox:hover .inner:nth-child(2) {
        / * * / on the back
        transform: rotateX(180deg) translateZ(200px);
        -webkit-transform: rotateX(180deg) translateZ(200px);
        opacity: 0.8;
      }
      .outsideBox:hover .inner:nth-child(3) {
        / * * / below
        transform: rotateX(-90deg) translateZ(200px);
        -webkit-transform: rotateX(-90deg) translateZ(200px);
        opacity: 0.8;
      }
      .outsideBox:hover .inner:nth-child(4) {
        / * * /
        transform: rotateX(90deg) translateZ(200px);
        -webkit-transform: rotateX(90deg) translateZ(200px);
        opacity: 0.8;
      }
      .outsideBox:hover .inner:nth-child(5) {
        Left / * * /
        transform: rotateY(-90deg) translateZ(200px);
        -webkit-transform: rotateY(-90deg) translateZ(200px);
        opacity: 0.8;
      }
      .outsideBox:hover .inner:nth-child(6) {
        / * right * /
        transform: rotateY(90deg) translateZ(200px);
        -webkit-transform: rotateY(90deg) translateZ(200px);
        opacity: 0.8;
      }
Copy the code
  • The degree of rotation and z-axis movement of each side is just enough to form a square.
  • :hoverThe degree of rotation of the central plane is the same as before, increasingThe z axisMove the distance, mouse move in to achieve expansion effect.
  • indivAdd a picture to the album effect.

rendering