css 회전하는 큐브

Notice

Recent Posts

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

열정과 게으름 사이

css 회전하는 큐브 본문

공부 메모/css3

css 회전하는 큐브

현냥이 2021. 5. 24. 02:04

생각보다 어렵지 않은 회전 하는 큐브

css는 x,y축 뿐 아니라 z축으로도 트렌지션을 사용할 수 있다.

그래서 3D 효과를 사용 가능.

여기에서 알아야 할 것은 물체의 멀고 가까움을 나타내는 원근감을 지정하는 방법과,

3D좌표를 어떻게 전달하고 사용 할 수 있느냐이다.

두개의 속성은 카메라의 움직임이라고 보면 된다.

perspective 는 원근감을 지정하는 속성이다. 두 개의 속성값을 가지고 있다.
- none : 원근감이 없다.
- length : z축 값을 지정하는 속성으로 값이 작으면 보이는 요소가 커지고, 값이 커지면 보이는 요소가 작아진다. (가까이 있으면 크게, 멀리 있으면 작게)
perspective-origin 은 원근감의 방향을 지정하는 속성이다.(보는 방향)
- 단위값과, left, center, right, top, bottom 의 값을 가질 수 있고, 초기 값은 50% 50% (center) 이다.

<html>

 <div class="cube-area">
        <div class="cube">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
            <div class="box5">5</div>
            <div class="box6">6</div>
        </div>
  </div>

{css}

.cube-area{ //카메라 라고 생각하자.
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    width: 500px; height: 500px; //뷰파인더 크기?
    perspective: 500px; 캔버스와 떨어져 있는 거리
    animation: pers 5s infinite linear; //원근감은 카메라가 움직인다.
}

.cube{ // 회전하는 큐브가 그려질 갠버스를 만들어 준다.
    position: relative; // 자식 요소들을 축에 따라 움직여 줘야 하니 기준을 잡아준다.
    width: 200px; height: 200px;
    transform-style: preserve-3d; //자식 요소드이 3d속성을 물려 받도록 설정
    animation: spin 5s infinite linear; // 요소의 움직임
}


@keyframes spin{
    0%{ transform: rotateX(0) rotateY(0);}
    100%{ transform: rotateX(360deg) rotateY(360deg);}
}

@keyframes pers{
    0%{ perspective: 500px; perspective-origin: 50% 50%;}
    25%{ perspective: 200px; perspective-origin: 50% 0%;}
    50%{ perspective: 400px; perspective-origin: 0% 50%;}
    75%{ perspective: 700px; perspective-origin: 0% 0%;}
    100%{ perspective: 500px; perspective-origin: 50% 50%;}
}

.cube>div{
    position: absolute; 
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 20px;
    border:2px solid #222; 
    box-sizing: border-box;
}

.cube .box1{
    transform: rotateY(90deg) translateZ(100px); // 회전시키고 밀고 당기며 위치를 맞춰 준다.
    background-color:rgba(240, 248, 255, 0.8);
}
	//translateZ(100px) -> 기준점이 center라 이동은 1/2값

.cube .box2{
    transform: rotateY(-90deg)  translateZ(100px);
    background-color:rgba(240, 254, 255, 0.8);
}
.cube .box3{
    transform: rotateY(180deg) translateZ(100px);
    background-color:rgba(240, 255, 241, 0.8);
}
.cube .box4{
    transform: rotateY(180deg) translateZ(-100px);
    background-color:rgba(255, 253, 240, 0.8);
}
.cube .box5{
    transform: rotateX(-90deg) translateZ(100px);
    background-color:rgba(255, 240, 248, 0.8);
}
.cube .box6{
    transform: rotateX(-90deg) translateZ(-100px);
    background-color:rgba(252, 240, 255, 0.8);
}