[CSS3] 3차원 변환 (회전하는 정육면체 만들기)

이번에는 벤더 프릭스를 사용하지 않고 

벤더 프릭스를 지원해 주는 prefix free 플러그인을 사용하도록 하겠습니다.

http://leaverou.github.io/prefixfree

일단 이렇게 폴더에다가 

Htmlpage1.html

prefixfree.min.js

StyleSheet.css

파일을 만들어줍니다.

전 착하니까 prefixfree.min 파일을 드릴게요

prefixfree.min.js

이번에는 처음으로 Html파일에다가 <style> 태그를 사용하지 않고 외부로 빼내어서 사용할건데요

그때 html파일에서 외부로 빼낸 css내용을 쓸 수 있도록 설정을 해주어야 합니다.

여기서 JavaScript 파일이랑 CSS 파일 두개를 빼내었습니다.

그래서!!

이렇게 써주면 됩니다.

그리고 회전하는 정육면체를 만들거니까

정육면체는 면이 6개죠?

그래서 <div>태그를 6개 만들어 줍니다.

그러면 3차원 변환(transform)함수에 대해서 한번 알아보도록 하겠습니다.

변환 함수	설명
translate3d(translateX, translateY, translateZ) translateX(translateX) translateY(translateY) translateZ(translateZ) scale3d(scaleX, scaleY, scaleZ) scaleX(scaleX) scaleY(scaleY) scaleZ(scaleZ) rotate3d(angleX, angleY, angleZ) rotateX(angleX) rotateY(angleY) rotateZ(angleZ)	특정한 크기만큼 이동  X축으로 특정한 크기만큼 이동 Y축으로 특정한 크기만큼 이동 Z축으로 특정한 크기만큼 이동 특정한 크기만큼 확대 및 축소 X축으로 특정한 크기만큼 확대 및 축소 Y축으로 특정한 크기만큼 확대 및 축소 Z축으로 특정한 크기만큼 확대 및 축소 특정한 각도만큼 회전 X축으로 특정한 각도만큼 회전 Y축으로 특정한 각도만큼 회전 Z축으로 특정한 각도만큼 회전

[영어 단어]

translate : 옮기다

rotate : 회전하다

scale : 규모

이제 본격적으로 회전하는 정육면체를 만들어보도록 하겠습니다.

(이 부분은 Stylesheet.css 입니다.)

section부분을 보시면

position: relative;

가 사용되어졌어요 position(위치 속성)을 사용한 이유는

예전에 Position 공식 혹시 기억나시나요? 기억 안나시는 분들은 

position 공식 (Click)

위에 링크를 클릭하셔서 다시 공부하시고 와주세요

아무튼! 부모인 <section>태그에 position:relative; 를 사용한 이유는

먼저 부모에서 상대적 위치 좌표를 사용해서 상,하,좌,우 로 이동한 다음에

자식인 <div>태그에서 절대 위치 좌표를 사용하여 마음대로 이동할려고 그런 것 입니다.

그리하여

이렇게 적용해준 것 입니다.

여기서 opacity는 투명도인데요

<div>태그의 투명도를 0.3으로 해주겠따는 뜻 입니다.

이제 3d 변환 속성을 이용해보도록 하겠습니다.

일단 이 부분을 보시면

예전에 배운 내용들이 사용되어졌는데요

div:nth-child(1)

이 부분이 이해가 안되시는 분들은

일반구조 선택자(Click)

여기로 가셔서 다시 공부를 해주시기 바랍니다.

해석을 하자면

div태그 중에서 앞에서 첫번째에 위치하는 div태그를 변형(transform)할건데 일단은 0도(0deg)를 회전(rotate)시켜주고 x축으로는 0px, y축으로는 0px, z축으로는 100px 만큼 이동(translate3d)해 주겠다.

이제 나머지도 입력을 해주도록 하겠습니다.

딱히 설명 필요 없겠? 위에서 설명했으니 ㅎㅎㅎ

이제 색을 입혀보도록 할게요

위에 rotateX, rotateY 를 입력을 못해줫어요 그래서 수정해줍니다.

(앞에서 본 정육면체)

분명 3d변환 속성도 주어졌고 색상도 넣어졌는데 왜 회전을 안하냐고요???

그 이유는 바로  animation속성을 사용해주지 않았기 때문입니다.

animation속성을 사용해보도록 하죠

애니메이션 속성들이 너무 많이 사용되었네요

그래서 이러한 속성들을 한줄로 사용할 수 있습니다.

이렇게 한줄로 사용이 가능합니다.

1.name

2.duration

3.timing-fuction

4.delay

5.iteration-count

6.direction

.

.

.

위에 보여지는 순서가 바로 animation을 한줄로 사용할때 사용 순서 입니다.

이렇게 animation을 추가해 주었고

밑에 보시면 @keyframes라는게 사용된게 보여지네요

이게 무엇이냐면 이것을 키프레임 규칙 이라고 부르며 CSS3에서 애니메이션을 지정하는 형식입니다.

해석을 하자면

일단 animation:rint 3s linear 0s infinent는 일단 애니메이션의 이름이 rint이고 애니메이션을 3초동안 재생하고 애니메이션의 수치 변형 함수를 linear로 하고 이벤트 발생 후 몇 초 후에 재생할지 정하는건 0초로 하고 애니메이션 반복 횟수를 무한(infinent)로 해준다는 뜻 입니다. 그리고 @keyframes는 form->to 로 해석을 하시면 됩니다. 먼저 x,y,z,축으로 0도 회전해준 다음에 360도 회전한다는 뜻 입니다.

그리고 실행을 하시면 3d로 실행은 안되고 평면으로 보여질 것 입니다.

그럼 어떻게 해야 3d인 정육면체로 보여질까요?

그것은 바로 transform-style 속성을 이용하면 됩니다.

transform-style 속성의 키워드는 두가지가 있는데요

flat : 후손의 3차원 속성을 무시 preserve-3d : 후손의 3차원 속성을 유지

이것입니다.

이번 코딩에서 후선은 <div>태그겟죠?

※참고로 기본으로 flat 키워드가 설정이 되어 있습니다. 그래서 2차원으로 보여진 것 입니다.

지금 이 상태는 후면이 보여지는데요 3차원 공간에서 평면의 후면을 보이지 않게 하는 스타일 속성을 한번 적용해보도록 하겠습니다.

이때 사용되는 속성이 바로 backface-visibility속성입니다.

여기서 이제 원근법을 적용해보도록 하겠습니다.

원근법은

http://www.hanbit.co.kr/exam/1955/perspective.htm

여기로 들어가셔서 perspective속성이 웹 페이지에 어떻게 적용되는지 확인할 수 있습니다.

한번 적용해 보도록 하겠습니다.

이렇게 적용하시면 원근법이 적용된걸 확인할 수 있습니다.

※일반적으로 perspective 속성은 200px~400px으로 적용한다고 합니다.

HtmlPage1.html

prefixfree.min.js

StyleSheet.css