transform-style

CSS

transform-style: preserve-3d

transform-style: preserve-3d;

設定した要素の「子要素」が3D化します

perspective: 数値

perspective: 800px;

3Dにした被写体を映すカメラとの距離です

値を小さくすれば被写体に近づきます

perspective-origin: -50% 50%

perspective-origin: -50% 50%;

わかりづらいので【デモサイト】を見て感覚を掴みます

X軸（-50％）、Y軸（50％）とすると左側面から被写体を見る視点になります？

transform: translate3d(x,y,z)

transform: translate3d(100px, 200px, 300px)

z軸方向の移動は拡大・縮小です

HTML

<div class="container">
    <div class="slide-up"></div>
</div>

BACK