자기소개서 겸 블로그를 만들려는중
html / css로 큐브를 만들어 보기로 했다.
큐브를 만들면서 나온 css도 다시 정리해보자!

html 구조

<div class="wrapper">

  <div class="perspective">
    <div class="cube">
      <div class="front">
        <img src="images/front.jpg">
      </div>
      <div class="back">
        <img src="images/back.jpg">
      </div>
      <div class="top">
        <img src="images/top.jpg">
      </div>
      <div class="bottom">
        <img src="images/bottom.jpg">
      </div>
      <div class="left">
        <img src="images/left.jpg">
      </div>
      <div class="right">
        <img src="images/right.jpg">
      </div>
    </div>
  </div>
```

* {
  box-sizing: border-box;
}
body {
  font-family: "Open Sans";
  line-height: 1.618em;
  color: #444;
  overflow-y: scroll;
  background-color: #444;
}

class별 역할 설명하겠다!
wrapper - 전체를 쌈
perspective - 원근감 줄거임
cube - 돌릴때에 cube 자체를 돌려야함
front, back... - 각각 이미지들의 위치와 방향!

wrapper

.wrapper {
  /* 브라우저가 더 크면 최대 50rem, 브라우저가 작으면100% */
  max-width: 50rem;
  width: 100%;

  margin: 1rem auto;
  text-align: center;  
}

전체를 싼 wrapper 클래스이다. max-width를 정해두고 브라우저가 더 작아지면 100%로 맞추었다.

perspective

.perspective {
  perspective: 2000px;
  position: relative;
  perspective-origin: 25rem -150px;
}

perspective: 2000px;

(허허 그림 못그린건 양해좀)
가상의 물체와 사람이 보는 시야와의 거리를 뜻한다.
2000px로 주었다.

perspective-origin: 25rem -150px;

wrapper 에서 max-width가 50rem이었다!
perspective-origin:수직방향 수평방향
중앙인 25rem에서 보고 수평방향은 좀더 위쪽인 -150px로 주어서
살짝 위에서 내려보는 시야로 원근감을 주었다.

position: relative;

wrapper 에 종속되게 하려 realative로 주었다!

cube

.cube {
  position: relative;
  width: 400px;
  margin: 3.5rem auto;
  transition: 0.5s; *요소의 변환을 부드럽게
  transform-style: preserve-3d; *큐브의 모양을 고정하고 돌려야함. 보존해줌 
  animation: rotate 10s infinite linear;
  *돌릴건데 10초동안 무한히 선형으로 
}
@keyframes rotate{ rotate는 0도에서 360도로 회전
  0% {transform : rotateY(0deg);}
  100% {transform : rotateY(360deg);}
}
.cube div {
  position: absolute;
  width: 400px;
  height: 400px;
  opacity: 0.95;
}

.cube div img {
  width: 100%;
  height: 100%;
}

cube 의 position 역시 relative로 두었고,
cube div 에서 absolute로 주어 이미지들을 하나로 합쳤다.
width, height를 400px로 고정했지만!
그림의 사이즈가 각각 다를수도 있어서
cube div img를 100%로 맞춘다.

돌리는 애니메이션

.cube 에서 transition: 0.5s 부드럽게 변화시킨다
( 나중에 버튼으로 회전할때에 0.5초동안 돌림 확바뀌지않게)

돌릴때 3d형태를 보존한채로 돌려야합니다

transform-style: preserve-3d; 속성은 형태를 보존해줌

일자로 회전!

animation: rotate 10s infinite linear;
linear방향으로 10초 주기로 무한히 회전시켜주는 속성

몇도에서 몇도까지??

@keyframes rotate{ rotate는 0도에서 360도로 회전
0% {transform : rotateY(0deg);}
100% {transform : rotateY(360deg);}
}

중간요약

자 여기까지 완성되었으면
모든 이미지가 합쳐져서 얇은 판떼기 형태로 회전한다.
이제 각각 front, back.. 등등의 방향을 잡고 각도를 돌려서 큐브형태로 만들어주면 된다.

front, back, left,,

front,back 방향 잡기

.front {
  transform: translateZ(200px);
}
.back {
  transform: translateZ(-200px) rotateY(180deg);
}

transform : translateZ rotateY 는 한줄에 적어야한다!
사진처럼 겹쳐있는 6개의 사진중 front는 Z방향으로 200px 앞으로 꺼내주고
back은 -200px로 뒤로 꺼낸다.
** back에서 뒤로 꺼내기만 하면 사진의 방향이 반대가 될것이다.

rotateY y방향으로 180도 방향돌려주면
각 면에서 바로볼떄 앞 방향이 될것이다.

left , right

left와 right를 표현해야한다.
rotateY로 y축으로 회전 후 앞으로 이동시키면 된다!

.left {
  transform: rotateY(-90deg) translateZ(200px);
}
.right {
  transform: rotateY(90deg) translateZ(200px);
}

top, bottom

자 이제 마지막 top 과 bottom 이다.

각 면의 앞방향 찾아 X축으로 회전 90도 -90도 회전시켜서 앞에 했던것처럼
앞으로 이동시키면 된다!

.top {
  transform: rotateX(90deg) translateZ(200px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(200px);
}

형태 완성!

멋있게 회전하는 정육면체가 완성되었다