3D

perspective : 원근감 설정하기

        div {
            width: 200px;
            height: 200px;
            margin: 150px 50px;
            border: 1px solid #000;
            float: left;
        }
        div p {
            width: 100%;
            height: 100%;
            background-color: blue;
            opacity: 0.3;
            transform: rotateY(50deg);
        }
        div:nth-child(1) {perspective: 150px;}
        div:nth-child(2) {perspective: 800px;}

3d 공간상에서 x축, y축 기준으로 회전하기

        div {
            width: 300px;
            height: 300px;
            float: left;
            margin: 100px;
            border: 1px solid #333;
            perspective: 700px;
        }
        div p {
            width: 100%;
            height: 100%;
            background-color: blueviolet;
            opacity: 0.3;
        }
        div:nth-child(1) p { transform: rotateX(45deg);}
        div:nth-child(2) p { transform: rotateY(45deg);}

transform-style: preserve-3d;

transform-style: flat;

transform: rotate3d(x,y,z,angle);

transform: translate3d(tx, ty, tz);