css3d概要

3d変換(回転?傾き?スケール?平行移動(dòng))

基礎(chǔ)知識(shí)

パースペクティブ(視距離、被寫界深度)パースペクティブ原點(diǎn)(視點(diǎn))
transfrom

(1)座標(biāo)x y z

(2)変換ベース點(diǎn)位置変換-原點(diǎn)
(3)変換スタイル:保持-3d

3D回転寫真アルバム

3D変換(3D変形)(回転?傾き?スケール?変換)

基礎(chǔ)知識(shí)

パース(視距離、奧行き)フィールドの) 視點(diǎn)-原點(diǎn)(視點(diǎn))
transfrom

(1) 座標(biāo) x y z

(2) 変換基點(diǎn)位置transform-origin
(3)transfrom-style:preserve-3d

3D回転寫真アルバム

比較的単純な座標(biāo)の y 軸回転が使用されています

html コード:

??<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>

まず、9 つの畫像を保持するために 9 つのボックスを構(gòu)築する必要があります。これは簡(jiǎn)単に理解できます。

css

          body{
            background: #6daf39;（背景加了個(gè)顏色 主要是好看）
          }
          .xj{
          perspective:600px;（這是井深）
          }
          .kj{
          transition: 1s;（運(yùn)動(dòng)時(shí)間）
          transform-style:preserve-3d;（實(shí)現(xiàn)3d效果 當(dāng)然這是非常重的）
          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のコードは非常に簡(jiǎn)単です;

js

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


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

のコード(kj)は3D空間です。kjをクリックすることが効果である場(chǎng)合、メソッドまたはがある必要があります。ステップ ;
3D 空間スタイルの回転 Y (これは上下の軸の回転です) TranslationZ (Z は 3D 3 次元のキャラクターの軸です。軸の位置を見(jiàn)つけるために 3D 空間を 275px 戻します)

CSS 3D の基礎(chǔ)知識(shí)と関連記事は、PHP 中國(guó)語(yǔ) Web サイトに注目してください。