css3

CSS3 2D transform(평면)

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

익스 9미만 지원안되는 css도 있음(scale)

translate()

- translate() 메서드는 요소를 현재 위치에서 X 축 및 Y 축에 지정된 매개 변수에 따라 이동시킨다

https://jsfiddle.net/jywoo/hcgbo6rb/2/

rotate()

- rotate()메소드는 주어진 정도에 따라 요소를 시계 방향 또는 시계 반대 방향으로 회전

scale()

- scale()메서드는 요소의 크기를 늘리거나 줄입니다 (폭 및 높이에 대한 매개 변수에 따라).

https://jsfiddle.net/jywoo/a01v4jek/

skewX()/ skewY()

-  skew()메서드는 지정된 각도만큼 X 및 Y 축을 따라 요소를 기울입니다. 

https://jsfiddle.net/jywoo/23fa05gy/1/

matrix()

- matrix()방법은 모든 2D 변환 방법을 하나로 결합합니다.(단축)

matrix () 메서드는 수학 함수가 포함 된 6 개의 매개 변수를 사용하여 요소를 회전, 크기 조절, 이동 (병합) 및 기울이기를 허용합니다.

매개 변수는 다음과 같습니다. matrix (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())

CSS3 3D transform(입체)

익스 10 미만 지원불가

• rotateX()
• rotateY()
• rotateZ()

rotateX()

-  rotateX()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다

rotateY()

-  rotateY()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다

rotateZ()

-  rotateZ()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다

https://jsfiddle.net/jywoo/xeu89ofj/1/

https://jsfiddle.net/jywoo/uaft7fxb/2/

참고 -

http://desandro.github.io/3dtransforms/

큐브 : https://desandro.github.io/3dtransforms/docs/cube.html

http://www.beautifulcss.com/archives/2136

http://www.beautifulcss.com/archives/2270

http://desandro.github.io/3dtransforms/