什麼是transform 3d

HTML

  <div id="area">
    <img src="圖片路徑">  
  </div>

CSS

#area {
  perspective: 2000px; /*透視距離感,定義深度的數值*/
  transform-style: preserve-3d;
  perspective-origin: right right; /*消失點x,y方向*/
}

img {
  transform: 語法如下;
}

位移

img {
  transform: translate3d(100px,100px,100px);
  transform: translateZ(300px);
}

縮放

img {
  transform: sclae3d(1,1,1.5) rotateX(45deg);
  /*3D縮放必須寫上 xyz 3值,且加上旋轉,才會看的到效果*/
  transform: scaleZ(1.5) rotateX(45deg);
  /*或指定3編之一*/
}

旋轉

img {
  transform: rotate3d(1,0,0,45deg);
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
 }

另一種方式是內部設置perspecive

內部設置perspecive 與外部設置perspecive 效果不同

CSS

#area {
  /*perspective: 2000px;*/ 
  transform-style: preserve-3d;
  perspective-origin: top right; /*消失點x,y方向*/
}

img {
  transform: perspective(2000px) rotateY(45deg); 
}