CSS 3D 기본

css3d 요약

3d 변환(회전 기울이기 배율 번역)

기본 지식

원근법(시거리, 피사계 심도) 원근-원점(시점)
transfrom

(1) 좌표 x y z

(2) 변환 기준점 위치 변환-원점
(3)transfrom-style: Preserve-3d

3D 회전 그림책

3d 변환(회전 기울이기 축척 번역)

기본 지식

시점(시거리, 피사계 심도) 원근-원점(시점) )
transfrom

(1) x y z 좌표

(2) 변환 기준점 위치 변환-원점
(3)transfrom-style: Preserve-3d

3D 회전 사진 앨범

비교적 간단한 좌표 Y축 회전을 사용합니다. 코드를 살펴보겠습니다.

html 코드:

  <p>
    </p><p><img  src="/static/imghwm/default1.png" data-src="img/p1.jpg" class="lazy" alt="CSS 3D 기본" ></p>
    <p><img  src="/static/imghwm/default1.png" data-src="img/p2.jpg" class="lazy" alt="CSS 3D 기본" ></p>
    <p><img  src="/static/imghwm/default1.png" data-src="img/p3.jpg" class="lazy" alt="CSS 3D 기본" ></p>
    <p><img  src="/static/imghwm/default1.png" data-src="img/p4.jpg" class="lazy" alt="CSS 3D 기본" ></p>
    <p><img  src="/static/imghwm/default1.png" data-src="img/p5.jpg" class="lazy" alt="CSS 3D 기본" ></p>
    <p><img  src="/static/imghwm/default1.png" data-src="img/p6.jpg" class="lazy" alt="CSS 3D 기본" ></p>
    <p><img  src="/static/imghwm/default1.png" data-src="img/p7.jpg" class="lazy" alt="CSS 3D 기본" ></p>
    <p><img  src="/static/imghwm/default1.png" data-src="img/p8.jpg" class="lazy" alt="CSS 3D 기본" ></p>
    <p><img  src="/static/imghwm/default1.png" data-src="img/p9.jpg" class="lazy" alt="CSS 3D 기본" ></p>
  

먼저 9개의 사진을 담기 위해서는 9개의 상자를 만들어야 합니다.

css 코드

          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는 매우 간단합니다.

js 코드

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


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

( kj)는 3D 공간입니다. kj를 클릭하면 방법이나 단계가 있어야 합니다.
3D 공간 스타일 회전Y(위 및 아래 축 회전) 이동Z(Z는 3D 3차원 문자 축입니다. 3D 공간을 275px 뒤로 이동시켜 축 위치를 찾으세요)

더 많은 CSS 3D 기초지식 관련 글을 보시려면 PHP 중국어 홈페이지를 주목해주세요!