목록3D (1)

IT 블로그

Css 3D 큐브 애니메이션

Css 3D 큐브 애니메이션 이번에는 transform을 이용해 아래와 같은 3D 큐브 애니메이션을 만들어 봤는데 그냥 재미로 한번 만들어 보자.. front back top btm left right Html 구조 잡기 html은 아래 코드와 같이 생각보다 엄청 간단하다. 정육면체의 앞, 뒤, 위, 아래, 좌, 우면과 각각의 면들을 감싸는 요소만 있으면 된다. 12345678 front back top btm left right Css 작성하기 먼저 큐브를 감싸는 녀석부터 원하는 크기와 각 면들의 3D애니메이션을 위해 transform-style에 preserve-3d를 지정해주었다. 123456.cube { position: relative; width: 200px; height: 200px; tra..
프로그래밍/css 2018. 10. 6. 10:00
이전 Prev 1 Next 다음