본문 바로가기

광고

Design

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

Reference

CSS

NEWS

SITE

Coding


Code View/Animation

[Animation] 사진찍는 폴라로이드 애니메이션 만들기 CSS3




CSS3로 이렇게 애니메이션 주니 놀라울 따름이네요~
모션을 계산하는 것도 어려울 텐데^^

<div id="letter">P</div>
<div id="description">is for Polaroid</div>

<div id="animation">
    <div class="flash"></div>
    <div class="fold top"></div>
    <div class="fold bottom"></div>
    <div class="face">
        <div class="notch"></div>
        <div class="lens"></div>
        <div class="dial right"></div>
        <div class="dial left"></div>
        <div class="button"></div>
        <div class="label">Polaroid</div>
    </div>
    <div class="photo"></div>
</div>

이게 기본 틀인데~~
참...대단하네요~






See the Pen P - Polaroid by Alex Bergin (@abergin) on CodePen.