Three D effect transform instance of css3

To achieve 3D effect with CSS3, first look at a picture


perspective sets the depth of field, which is the Z-axis distance.
Perspective origin: set the perspective. It is different to see the same stereo from different perspectives.
After setting these, you can build the stereograph you want. Before building, you can generate the container. To keep the 3D effect of the elements in the container, you need to add transform style: preserve-3d in the style;
To define the location of the elements in the container, there are not many tranform attributes. You can check the website for a detailed introduction. Here we mainly talk about two attributes: the first rotateZ(val), which revolves around the z-axis. val is the angle unit deg, for example: rotateZ(90deg), which revolves 90 degrees around the z-axis. rotateY(),rotateX(), which is also suspicious, will not be talked about. Second, the translateZ(val) offset, which is the offset along the Z axis, val, which is the distance. For example, the translateZ(100px) offset along the Z axis is 100 pixels. Of course, the depth of field should be set here: the offset, the depth of field must be fixed, the larger the offset, the more obvious the effect, the longer the distance, the stronger the image stretch.
Here is the code example:
<div class="bgl">
    <div class="titlea">
      <div>hello</div>
      <div>world</div>
      <div></div>
    </div>
  </div>
Style:
.bgl{
    font-size: 32px;
    color: green;
    background-color: black;
    width: 100%;
    height: 100vh;
    perspective: 1000px;
    perspective-origin: 53% 40%;
    animation: moveOver 10s linear infinite;
  }
  .titlea{
    width: 500px;
    height: 500px;
    background-color: #4cbbb4;
    position: absolute;
    left: 30%;
    top: 30%;
  }
  .titlea>div{
    position: absolute;
    width: 200px;
    height: 200px;
    left: 70%;
    top: 0;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
    opacity: 0.5;
    transform-style: preserve-3d;
  }
  .titlea>div:nth-child(1){
    background-color: red;
    /*animation: move 10s linear infinite;*/
    transform: translateZ(-500px);
  }
  .titlea>div:nth-child(2){
    background-color: cornflowerblue;
    transform: rotateX(10deg);
    /*animation: moveDown 10s linear infinite;*/
  }
  .titlea>div:nth-child(3){
    background-color: white;
    width: 500px;
    height: 10px;
    transform: rotateY(90deg) translateX(250px) translateZ(-150px) translateY(100px);
  }
  @keyframes move { /*Keyframe animation*/
    0% {
      transform: translateZ(-5000px);
    }
    100% {
      transform: translateZ(1000px);
    }
  }
  @keyframes moveDown { /*Keyframe animation*/
    0%, 100%{
      top:-60%;
      transform: rotateX(70deg);
    }
    50% {
      top: 60%;
      transform: rotateX(-70deg);
    }
  }
  @keyframes moveOver { /*Keyframe animation*/
    0%, 100%{
      perspective-origin: 53% 40%;
    }
    25%{
      perspective-origin: 0% 40%;
    }
    50% {
      perspective-origin: 50% 40%;
    }
    75% {
      perspective-origin: 100% 40%;
    }
  }

Example: http://www.lightconmos.com/test/#/test3 where the animation setting is the left-right conversion of perspective, the effect of different perspectives is different.

Reference: http://blog.csdn.net/q1056843325/article/details/53287833

Tags: css3

Posted on Mon, 04 May 2020 05:30:00 -0700 by jcampbell1