[2016.1.14] css3 transform preserve-3d 속성을 이용한 3d 아이폰 디자인 예제

와우... css 만으로 정말 깔끔하게 잘 표현됐네요.

비율과 각도 맞추느라 꽤 고생했겠네요..ㅎㅎ

일반적으로 보이는 평면의 요소들을 3d로 배치시켜서 이렇게 표현한건데요..

사용된 css3 속성은 생각보다 많지는 않습니다.

3d를 구성하는 요소는 다음과 같은데요

perspective

transform - rotateX, rotateY, rotateZ

transform-style - preserve-3d

각각 적용된 부분을 살펴보면..

  1. 가장 최상위 요소로써 iphone을 보는 관점을 지정해 줄 #wrapper div 에 적용된 perspective 속성

#wrapper {
    height: 520px;
    width: 800px;
    margin-left: -700px;
    margin-top: 300px;
    position: absolute;
    perspective: 6000px;
    /* perspective-origin: 10% 78%; */
    top: 50%;
    left: 50%;
}

  2. 각각의 요소들에 적용된 회전 rotateXYZ 속성

  3. 각각의 요소들에 3D 변형 스타일 적용

#iphone {
    width: 372px;
    border-radius: 50px;
    position: absolute;
    background: 0;
    box-shadow: none;
    left: 206px;
    top: -140px;
    transform: rotateX(61deg) rotateZ(-45deg);
    transform-style: preserve-3d;
}

#volume {
    height: 128px;
    width: 11px;
    border-radius: 10px;
    position: absolute;
    background: #f9f9fa;
    top: 171px;
    left: -20px;
    transform: rotateY(95deg);
    transform-style: preserve-3d;
    box-shadow: inset #292a2f 4px 0 8px 1px, #D5D5D5 -1px 0 2px;
}

​

이정도네요..

3D 관련 글 더 보기..

2015/12/09 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.12.09] box-shadow 를 활용한 3D app store 버튼

2015/11/18 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.11.19] css3, jquery 를 활용한 회전 소셜 버튼

2015/09/23 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.09.23] 메뉴UI - 아크형태로 팝업하는 아기자기한 메뉴 아이콘

2015/09/14 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.09.14] Menu UI - 3D cube content

전체 소스와 데모는 아래에서 확인하세요~

간단한 사용 예제 및 Demo