css 3d basics

css3d summary

3d transform (3D deformation) (rotate skew scale translate)

Basic knowledge

perspective (viewing distance, depth of field) perspective-origin (viewpoint)
transfrom

(1) Coordinates x y z

(2) Transformation base point position transform-origin
(3)transfrom-style: preserve-3d

3D Rotate picture album

3d transform (rotate skew scale translate)

Basic knowledge

perspective (viewing distance, depth of field) perspective- origin (viewpoint)
transfrom

(1) Coordinates x y z

(2) Transformation base point position transform-origin
(3)transfrom-style：preserve-3d

3D Rotating Picture Album

It uses a relatively simple coordinate y-axis rotation. Let’s take a look at his code

html code:

  <p class="kj" id="kj">
    <p class="mian"><img src="img/p1.jpg" alt=""></p>
    <p class="mian"><img src="img/p2.jpg" alt=""></p>
    <p class="mian"><img src="img/p3.jpg" alt=""></p>
    <p class="mian"><img src="img/p4.jpg" alt=""></p>
    <p class="mian"><img src="img/p5.jpg" alt=""></p>
    <p class="mian"><img src="img/p6.jpg" alt=""></p>
    <p class="mian"><img src="img/p7.jpg" alt=""></p>
    <p class="mian"><img src="img/p8.jpg" alt=""></p>
    <p class="mian"><img src="img/p9.jpg" alt=""></p>
  </p>

First, you need to build nine boxes to put nine pictures. This is easy to understand.

css code

          body{
            background: #6daf39;（背景加了个颜色 主要是好看）
          }
          .xj{
          perspective:600px;（这是井深）
          }
          .kj{
          transition: 1s;（运动时间）
          transform-style:preserve-3d;（实现3d效果 当然这是非常重的）
          width:200px;
          height: 300px;
          margin:80px auto;
          position: relative;
          transform: rotateY(0deg) rotateX(0deg) translateZ(-275px);
          transform-origin: center center -275px;
          }

      .mian{
        position:absolute;
        font-size: 50px;
        color:#fff;
        text-align: center;
        line-height: 300px;
      }
      .mian:nth-child(1){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(0deg)translateZ(275px);
      }
      .mian:nth-child(2){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(40deg)translateZ(275px);
      }
      .mian:nth-child(3){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(80deg)translateZ(275px);
      }
      .mian:nth-child(4){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(120deg)translateZ(275px);
      }
      .mian:nth-child(5){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(160deg)translateZ(275px);
      }
      .mian:nth-child(6){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(200deg)translateZ(275px);
      }
      .mian:nth-child(7){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(240deg)translateZ(275px);
      }
      .mian:nth-child(8){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(280deg)translateZ(275px);
      }
      .mian:nth-child(9){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(320deg)translateZ(275px);
      }

css is here, very simple;

js code

    kj.onclick=function () {
      cishu++;
      var jiaodu=40*cishu;


      kj.style.transform="rotateY("+jiaodu+"deg)translateZ(-275px)"
    }

(kj) is the 3D space. If clicking kj is an effect, there must be a method or step;
3d space style rotateY (this is the up and down axis rotation) translateZ (Z is the 3D three-dimensional character axis; let Move the 3d space back 275px to find the axis position)

For more css 3d basic knowledge related articles, please pay attention to the PHP Chinese website!