본문 바로가기

광고

Design

Reference

Tutorial

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

CSS

NEWS

SITE

Coding


광고

transform

[Animation] 평면을 3D 직사각형 큐브로 만드는 transform 이 애니메이션의 핵심은 /* animations */@keyframes cube-view { 20%, 90% { transform: rotateX(0deg) rotateY(0deg); } 30%, 80% { transform: rotateX(45deg) rotateY(-45deg); }} @keyframes adjust-top { 30%, 80% { left: 100%; transform: rotateZ(90deg) translateZ(0px); } 40%, 70% { left: 0; transform: rotateZ(45deg) translateZ(50px); }} @keyframes adjust-bottom { 30%, 80% { right: 100%; transform: rotateX(0deg) r..
[Loading] keyframe과 transform을 이용한 로딩 애니메이션 기존의 로딩과 모션과는 많이 다르죠^^이런 로딩 모션도 좋네요^^모션은 keyframe으로 잡아주고요세세한 부분은 transform과 anmation으로 설정해 주었습니다. Loading... 9개의 모션 단계를 구성하여 거기에 맞게 움직임을 설정하였네요^^ animation: rotate1 5s; animation-iteration-count:infinite; animation-direction:alternate; transform-origin: 50% 50%; 기본 구성은 이렇네요^^ See the Pen Loading Animation by Yash Bhardwaj (@yashbhardwaj) on CodePen.
[3D] CSS3 transform을 이용한 3D느낌의 움직임 표현하기 마우스를 오버하면 뒤로 넘어가는 3D입니다. transform의 rotate기능과 translate의 기능을 이용한 간단한 CSS3입니다. transform: rotateX(95deg) translateZ(-80px) scale(0.75);마우스 오버시transform: rotateX(75deg) translateZ(5vw);요정도 해주면 되겠네요~ transform의 기능만 잘 이해하고 있으면 크게 어렵진 않을것 같습니다. See the Pen CSS 3D Captioned Domino Image by Dudley Storey (@dudleystorey) on CodePen. 크롬에서 확인하면 제일 좋습니다.
[CSS] CSS3와 관련된 Generators 프로그램 모음입니다. http://css3maker.com/ CSS3의 Gradient, Transform, Animation, Transition, RGBA, Text Shadow, Box Shadow, Text Rotation의기능을 알아 볼 수 있는 프로그램입니다. http://westciv.com/tools/gradients/ CSS3의 Linear Gradients, Radial Gradients, Text Properties, Box Properties, Transforms의기능을 알아볼 수 있는 제네레이터입니다. http://www.cssmatic.com/ CSS3의 Gradient 제네레이터입니다.SASS 소스까지 지원을 하네요 http://grad3.ecoloniq.jp/ 일본에서 제작된 CSS3 버튼 만들기..