誰でも理解できるCSS3 3Dの小さなデモ

css3 3d事例まとめ

最近Webアニメーションにハマったので、学習過程を記録して皆さんと共有していきます。私が最近やったことを共有しましょう

1. 回転パズル

まず、効果を見てみましょう

コードは主にHTMLとCSS3で構成されています。比較的単純であること。

最初は HTML コードです:

  <p>
    </p><p>
      </p><p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    

    <p>
      </p><p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    

    <p>
      </p><p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    

    <p>
      </p><p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    

    <p>
      </p><p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    
  

ここでは 3 層の p HTML フレームワークが使用されており、レベルは非常に明確です。
次の焦点は CSS コードであり、CSS3 の機能を使用して 3D 効果とスクロール効果を実現し、常に 3D に見えるようにする方法です。

body{  background: red;}/*对于相机元素*/.camera{  perspective: 800px;/*这个属性是视距(景深)，就是目测的距离*/
  width: 500px;  height: 300px;  margin: auto;  transform-style: preserve-3d;/*该属性规定如何在 3D 空间中呈现被嵌套的元素。preserve-3d子元素将保留其 3D 位置。*/}/*对于模块元素*/.kuai{  width: 100px;  height: 300px;  margin: 50px auto;  float: left;  transform-style: preserve-3d;  position: relative;  transition:transform 1s;  margin-left: -1px;}/*对于模块的每个面元素*/.kuai:nth-of-type(2)>.mian{  background-position: -100px 0;}.kuai:nth-of-type(3)>.mian{  background-position: -200px 0;}.kuai:nth-of-type(4)>.mian{  background-position: -300px 0;}.kuai:nth-of-type(5)>.mian{  background-position: -400px 0;}.kuai:nth-of-type(6)>.mian{  background-position: -500px 0;}.mian{  width: 100px;  height: 300px;  position: absolute;  font-size:100px;  text-align: center;  line-height: 300px;  transform-style: preserve-3d;  background-color: black;  backface-visibility: hidden;}.mian:nth-of-type(1){  transform: translateZ(150px);  background:url(../images/pic1.jpg) no-repeat;  background-size: 500px 100%;}.mian:nth-of-type(2){  transform: translateZ(-150px) rotateX(180deg);  background:url(../images/pic2.png) no-repeat;  background-size: 500px 100%;}.mian:nth-of-type(3){  width: 300px;  transform: rotateY(-90deg) translateZ(150px);/*3d中transform属性是关键的，它主要是靠旋转 移动 缩放来变形实现的*/}.mian:nth-of-type(4){  width: 300px;  transform: rotateY(90deg) translateZ(-50px);}.mian:nth-of-type(5){  transform: rotateX(90deg) translateZ(150px);  background:url(../images/pic3.jpg) no-repeat;  background-size: 500px 100%;}.mian:nth-of-type(6){  transform: rotateX(-90deg) translateZ(150px);  background:url(../images/pic4.jpg) no-repeat;  background-size: 500px 100%;}

最後のものはjs

window.onload=function() {  var camera=document.getElementById('camera');  var kuais=camera.getElementsByClassName('kuai');  var chishu=0;  var geshu=5;
  camera.onclick=function() {
    chishu++;    for(var i=0;i<geshu><p>ここに使用されない属性がありますtransform-originは要素の原点位置を変更するために使用され、設定する必要はありません。図に示すように <br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/013/a1c4a0022d33fa110b8f01359cde5423-1.png?x-oss-process=image/resize,p_40" class="lazy" alt="人人都能读懂的css3 3d小demo "    style="max-width:90%"  style="max-width:90%" title="人人都能读懂的css3 3d小demo "><br> 同様に、transform-origin:top right (右上隅が原点)、transform-origin:bottom right (右下隅が原点)、transform に設定することもできます。 -origin:bottom left (左下隅が原点です) )</p>
<h1 id="まとめ">まとめ</h1>
<h4 id="つまり-CSS-を学習する過程で-たくさんの新機能を見て-その使い方を学びましたが-言いたいことは使用方法に関係なく-コードのすべての行を理解する必要があります-特に-D-変換の場合-各属性値がもたらす効果をよりよく理解するには-D-空間を根本的に理解する必要があります-持ってくる"> つまり、CSS3を学習する過程で、たくさんの新機能を見て、その使い方を学びましたが、言いたいことは使用方法に関係なく、コードのすべての行を理解する必要があります。特に 3D 変換の場合、各属性値がもたらす効果をよりよく理解するには、3D 空間を根本的に理解する必要があります。持ってくる。 </h4>
<p>誰でも理解できる css3 3d の小さなデモに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。 </p>
<p><br></p></geshu>