[HTML+CSS+JS] 3D-Cube banner(preserve-3d)

 

사용 파일 : html, css, js 각 하나씩 / 페이스북, 인스타그램, 트위터,유튜브 아이콘 이미지

 

완성본 링크 : https://jonghoon7431.github.io/3d-cube-banner/

 

 

1) html 문서 작성

 

 

 

 

전체를 감쌀 container div 1개

내부에 배너를 생성할 .cube div 생성

.cube div 내부에 각 아이콘 이미지 생성

 

 

 

 

 

 

 

 

 

 

 

2) css 작성

 

 

 

 

 

 

전체 영역 선택 ( *{} ) : margin, padding 제거 / border  box로 box-sizing 설정

 

body 태그 :

어두운 색으로 배경 지정

display : flex 속성과 justify-content , align-items 속성으로 중앙 정렬,

높이 : 100vh ( viewport height ) 설정

 

 

[원근감 설정]

.container{

    perspective: 1000px;

}

cube div 의 부모 div에 perspective (원근감 적용 속성) 설정

 

ex) 

 

perspective의 값이 커질수록 위 이미지의 카메라가 멀어짐 - 멀리서 보는 느낌

perspective 값이 작아질수록 카메라가 가까워짐 ( 원근감으로 인한 왜곡 극대화 )

 

 

 

 

 

 

.cube{

    width: 128px;

    height: 128px;

    transform-style: preserve-3d;

    transition: all 3s;

}

 

 

 

 

transform-style : 3d 공간에서 자식 요소의 랜더링 방식 정의

- preserve-3d  :  요소들이 z축을 반영해 3차원으로 랜더

 

transition : 애니메이션 속도 조절

- all : 모든 속성에 적용, 3s : 3초에 걸쳐서 적용

 

 

 

 

* 

none : 모든 속성에 적용하지 않음

all : 모든 속성에 적용

property : 속성을 정합니다. 여러 개의 속성을 지정할 경우 쉼표로 구분

initial : 기본값으로 설정

inherit : 부모 요소의 속성값을 상속받음    

 

 

 

 

 

.cube img{

    position: absolute;

    top: 0;

    left: 0;

}

 

큐브 내에 들어갈 모든 이미지 한 자리에 고정

 

 

 

 

.cube img:nth-child(1){

    transform: translateZ(64px);

}

.cube img:nth-child(2){

    transform: rotateX(90deg) translateZ(64px);

   

}

.cube img:nth-child(3){

    transform: rotateX(180deg) translateZ(64px);

}

.cube img:nth-child(4){

    transform: rotateX(270deg) translateZ(64px);

}

 

 

:nth-child()  :  부모 요소 안의 요소중 (n)번째 요소 선택 / 선택자 요소

 

transform 의 rotateX ( X축을 기준으로 회전, y z 축 또한 사용 가능 / rotateY,rotateZ )

translateZ ( Z축 기준 이동 / x y 또한 동일하게 사용 가능 ) 

 

 

 

 

 

 

3) javaScript 작성

 

[css 로 생성한 3d 큐브 회전]

 

 

 

 

 

 

let deg = 0;

deg(각도) 0으로 선언  ( let : 변수= 추후에 값 변경 가능 )

 

setInterval(()=>{

    deg = deg-90;

    document.querySelector(".cube").style.transform

    = 'rotateX('+ deg + 'deg)';

}, 1000)

 

 

 

setInterval : 반복함수

 

1. deg = deg-90} , 1000

: 1초마다 각도를 -90

2.  document.querySelector(".cube").style.transforn = 'rotateX('+deg+'deg)';

: class가 cube 인 div에  transform style 요소 제어

 

 

 

 

 

https://www.youtube.com/watch?v=km0G63lOm7s&list=PL-eeIUD86IjSyxTbGT7wY3Hie_HA5bKvg&index=5