웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

3D transform 본문

css3

3D transform

jokack01 2013. 10. 8. 11:05

3D transform

3D 변형을 할 수 있게 하는 속성이다. rotate, scale, translate, skew 등과 같은 변형이 가능하다.

 

  • None : 변형 속성을 적용하지 않음
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수
  • translate3d(x,y,z) : 요소의 위치를 옮기는 속성
  • translateX(x) : 요소의 x 좌표 위치를 옮기는 속성
  • translateY(y) : 요소의 y 좌표 위치를 옮기는 속성
  • translateZ(z) : 요소의 z 좌표 위치를 옮기는 속성
  • scale3d(x,y,z) : 요소의 크기를 비율에 맞춰 확대/축소하는 속성
  • scaleX(x) : 요소의 x축 크기를 비율에 맞춰 확대/축소하는 속성
  • scaleY(y) : 요소의 y축 크기를 비율에 맞춰 확대/축소하는 속성
  • scaleZ(z) : 요소의 z축 크기를 비율에 맞춰 확대/축소하는 속성
  • rotate3d(x,y,z,angle) : 요소를 지정된 각도 만큼 회전시키는 속성
  • rotateX(angle) : 요소를 지정된 각도 만큼 x축을 회전시키는 속성
  • rotateY(angle) : 요소를 지정된 각도 만큼 y축을 회전시키는 속성
  • rotateZ(angle) : 요소를 지정된 각도 만큼 z축을 회전시키는 속성
  • skewX(angle) : 요소를 지정된 각도만큼 x축 모양을 비스듬히 변형시키는 속성
  • skewY(angle) : 요소를 지정된 각도만큼 y축 모양을 비스듬히 변형시키는 속성
  • skewZ(angle) : 요소를 지정된 각도만큼 z축 모양을 비스듬히 변형시키는 속성

 

ex) 3d 입체감 주기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3D transform</title>
<style type="text/css">
#inner{
    margin:200px;
    width:300px;
    height:150px;
    background:#0C9;
    -webkit-transform:
        perspective(275)
        translate3d(16px, 30px, 59px)
        scale3d(1.35, 1.25, 1.5)
        rotate3d(23, 18, 41, 21deg);
    -webkit-transform-origin: 50% 50% 50%;
    -webkit-transform-style: preserve-3d;
}
</style>
</head>
<body>
<h1>3D transform</h1>
<p>입체감을 줄 수 있게 되었다.</p>
<div id="inner">3d transform</div>
</body>
</html>

'css3' 카테고리의 다른 글

Animation  (0) 2013.10.08
Transition  (0) 2013.10.08
2D transform  (0) 2013.10.08
font-face  (0) 2013.10.08
word-wrap  (0) 2013.10.08
'css3' Related Articles more