[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 관련 글 더 보기..



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


간단한 사용 예제 및 Demo

See the Pen Phone by Chandan Choudhary (@Cancepto) on CodePen.

다른 카테고리의 글 목록

Dev. 웹/Front-end 웹개발을 위한 codepen 카테고리의 포스트를 톺아봅니다