CSS 3D | Notion

em 과 rem

rem은 현재 html 루트 font-size 기준으로 1rem = 16px

em은 현재 요소의 폰트사이즈의 기준으로 요소의 크기를 잡는다. (ex 현재 요소의 폰트사이즈의 기준으로 패딩을 변경한다 )

vw, vh

현재 켜져있는 브라우저 창의 크기

스크린샷 2022-06-26 오후 4.31.13.png

공간을 3D로 만들기

<style>
        .world {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60vw;
            height: 60vh;
            background: #fff000;
						/* perspective라는 속성을 주게되면 wrapper공간이 3D로 바뀐다. 단위 px*/
            perspective: 500px;
		}
		.card {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100px;
			height: 150px;
			border-radius: 0.5em;
			font-size: 1.5rem;
			background: red;
			transform: rotateY(45deg);
			/* 요소에다가 회전되는 element자체에 perspective를 주면된다 */
			/* transform: perspective(500px) rotateY(45deg); */
		}
    </style>
</head>
<body>
    <div class="world">
		<div class="card">A</div>
		<div class="card">B</div>
		<div class="card">C</div>
    </div>
</body>

perspective 속성에서 눈에서 가까울수록 3D효과가 극적으로 표현된다.

(얼마나 내눈에 멀리있는 시점으로 바라볼꺼냐? 숫자가 작아질수록 내 눈에 앞에 있는것 처럼 보인다)

즉 가까울 수록 더 3D처럼 보이기 된다.

멀리있을때는 완만하게 보인다.

world에 hover 했을때 카드를 180도 회전 시키고 싶다면?!

<style>
      .world {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60vw;
        height: 60vh;
        background: #fff000;
        perspective: 500px;
      }
      .card {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 150px;
        border-radius: 0.5em;
        font-size: 1.5rem;
        margin: 1em;
        background: red;
        transform: rotateY(0deg);
        transition: 1s;
        /* transform: perspective(500px) rotateY(45deg); */
      }
      .world:hover .card {
        transform: rotateY(180deg);
      }
    </style>

rotateY(0deg)라는 속성을 굳이 써주는 이유는 브라우저가 봤을때 기준을 잡아 주기 위함이다.

화면 기록 2022-06-26 오후 4.49.23.mov