css 3 D効果

css 3 3 D変形transfrom初学
今週css 3 3 dを勉強して、cssの無限の魅力を感じて、いくつかの特定のコード記号を通じて3 D効果のページを作成することができます.
透視
3 D空間をアクティブにするには、1つの要素に1つのピボットポイントが必要です.ピボットポイント(視点、焦点距離):1を得るには、2つの方法があります.直接perspectiveを書く

perspective: 600;

2.transfrom書き

transfrom:perspective(600px);

どちらのリリースも実現できます
3.perspective-originは、視点の変換をデフォルトで正中心にすることができます.
いくつかの設定方法:

perspective-origin:center center``perspective-origin:50% 50%

はpxを設定することもできる.
1ページで3 d効果を実現するには、この一言を加えなければなりません.

transform-style: preserve-3d;

は3 D効果以上の要素が少なくないことを実現することができます.
___
transfrom

transfrom:transformには3つの転換方法がある.

回転(rotate):rotateX()回転X軸rotateY()回転Y軸rotateZ()回転Z軸

スケール(scale)サイズスケール効果2 D効果と同じ

移動(transtate)transtate(Z)前後移動.

css 3で3 D効果を書く上でその2部が欠けてはいけない.いくつかの例でcss 3 D効果を検証し、css 3 3 D***をよりよく理解できるようにします.
カード反転効果
このケースは純jsで書けますまずHTMLレイアウト

最简单的几个DIV排版
css代码如下

body{
    transform-style:preserve-3d;//  3d  
    perspective:500px;
    background:#81b7c1;
}
.box{
  width:200px;
  height:200px;
  margin:50px auto;
  transform-style:preserve-3d;
  position:relative;
  transform:rotateY(0deg);
  transition:transform 0.5s;
}
.box1{
  width:200px;
  height:200px;
  position:absolute;
  line-height:200px;
  font-size:100px;
  text-align:center;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
}
.box:hover{
  transform:rotateY(180deg)
}
.box11{
  background:url(../images/3.jpg) no-repeat;
  background-size:100%;
}
.box12{
  background:url(../images/4.jpg) no-repeat;
  background-size:100%;
  transform:rotateY(180deg);
  backface-visibility: hidden;//    
}

先ほどのtransfromのいくつかのプロパティを使用しました
立方体
このケースはcss 3 Dに対する認識がより深いと信じています.

css排版

body{
  background-color:rgba(46, 112, 72, 0.63);
}
.cude{
  perspective:500px;
  transform-style:preserve-3d;
}
.box{
  transform-style:preserve-3d;
  width:200px;
  height:200px;
  margin:200px auto;
  position:relative;
  transition:transform 1s;
}
.box:hover{
  transform:rotateX(1800deg) rotateY(360deg);  translateX(100px);
}
.box .box1{
  position:absolute;
  width:200px;
  height:200px;
  line-height:200px;
  font-size:100px;
  text-align:center;
  opacity:1;
}
.box .left{
  background-image:url(../images/1.jpg);
  background-size:100%;
  transform: rotateY(-90deg) translateZ(100px);
}
.box .right{
  background-image:url(../images/2.jpg);
  background-size:100%;
  transform: rotateY(90deg) translateZ(100px);
}
.box .top{
  background-image:url(../images/3.jpg);
  background-size:100%;
  transform: rotateX(90deg) translateZ(100px);
}
.box .bottom{
  background-image:url(../images/4.jpg);
  background-size:100%;
  transform: rotateX(-90deg) translateZ(100px);
}
.box .back{
  background-image:url(../images/5.jpg);
  background-size:100%;
  transform: translateZ(-100px) rotateY(180deg) rotateX(-180deg);
}
.box .front{
  background-image:url(../images/6.jpg);
  background-size:100%;
  transform: translateZ(100px);
}

上の写真を何枚か使っていますが、css 3 Dにもっと深いのではないでしょうか.最後に、css 3 Dを学ぶことで、3 D効果をよりよく理解し、見識を広げ、視野を広げることができます.