Share
Sign In
도형 변형하기 transform
도형 변형 속성 transform
1.
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
2.
또한 CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경한다.
3.
변형 가능한 요소만 transform할 수 있다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있다.
속성 값 모두 보기
/* 키워드 값 */
transform: none;
/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;/*형식 구문*/
where
<transform-list> = <transform-function>+
where
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
where
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )
where
<length-percentage> = <length> | <percentage>translate() - 이동하기
원하는 만큼 표시정보를 이동하게 한다.
translate(x축, y축) : x축, y축에 대한 정보를 입력하면 x축과 y축으로 이동한다.
translateX(x축) : x축 만큼 이동한다.
translateY(y축) : y축 만큼 이동한다.
translateZ(z축) : z축 만큼 이동한다.
translate3d(translateX, translateY, translateZ) : 특정 크기만큼 3차원으로 이동한다.
scale() - 확대/축소하기
속성값으로 각 축에 대한 정보가 들어가며, 1보다 크면 확대되고, 1보다 작으면 축소 됩니다. 이때 1은 100%이다.
scale(x축, y축) : x축, y축 만큼의 배율로 확대한다.
scaleX(x축) : x축 만큼 확대/축소한다.
scaleY(y축) : y축 만큼 확대/축소한다.
scaleZ(z축) : z축 만큼 확대/축소한다.
scale3d(scaleX, scaleY, scaleZ) : 특정 크기만큼 3차원으로 확대/축소한다.
skew() - 기울이기
skew 속성 함수는 2차원 왜곡만 가능하며 지정한 각도(deg)만큼 기울여 왜곡한다. 수치 입력시 단위는 deg이다.
skew(x축_기울기, y축_기울기) : x축, y축 기울기만큼 기울기로 왜곡한다.
skewX(x축_기울기) : x축 기울기 만큼 기울인다.
skewY(y축_기울기) : y축 기울기 만큼 기울인다.
rotate() - 회전하기
rotate 변형 함수는 2차원과 3차원 회전이 가능하며, 각도만큼 시계방향(deg) 또는 반시계 방향(-deg)으로 회전한다.
rotate(x축_각도, y축_각도, z축_각도) : x축, y축, z축 각도만큼 회전한다.
rotateX(x축_각도) : x축 각도만큼 회전한다.
rotateY(y축_각도) : y축 각도만큼 회전한다.
rotateZ(z축_각도) : z축 각도만큼 회전한다.
rotate3d(angleX, angleY, angleZ) : 특정 각도만큼 3차원으로 회전한다.
예제
펼치기
transform-origin - 중심축 변환하기
해당 속성은 변환 중심축의 위치를 바꾸는 속성이다. 기준점의 기본값은 정가운데가 기준점이고, 오른쪽으로 갈수록 1~100% 아래로 갈수록 1~100%이다.
선택자{
transform-origin : x축 y축 z축;
}속성값
x축 : 백분율, left, center, right 중에서 지정한다.
y축 : 백분율, top, center, bottom 중에서 지정한다.
z축 : 길이 값만을 사용한다.
Perspective() - 원근법
perspective(20px); :
The perspective() CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the perspective CSS property — are not drawn.
The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.
Using this property with a value different than 0 and none creates a new stacking context. Also, in that case, the object will act as a containing block for position: fixed elements that it contains.
여러개의 도형에 원근법을 적용하려면 적용할 도형의 부모 태그에 perspective 속성을 주는것이 좋다.
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;transform:perspective(20px); : 변환 함수는 변환되는 요소에 적용되는 변환 값의 일부이다. 또 바로 위의 항목인 3 차원 공간에서 도형이 변환된 자식의 부모에 삽입된 perspective 및 perspective-origin 속성과 다르다.
예제
펼치기
펼치기
CSS 홈으로 돌아가기
CSS3
메인으로 돌아가기
도형 변형 속성 transform
1.
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
2.
또한 CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경한다.
3.
변형 가능한 요소만 transform할 수 있다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있다.
속성 값 모두 보기
/* 키워드 값 */
transform: none;
/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;/*형식 구문*/
where
<transform-list> = <transform-function>+
where
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
where
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )
where
<length-percentage> = <length> | <percentage>translate() - 이동하기
원하는 만큼 표시정보를 이동하게 한다.
translate(x축, y축) : x축, y축에 대한 정보를 입력하면 x축과 y축으로 이동한다.
translateX(x축) : x축 만큼 이동한다.
translateY(y축) : y축 만큼 이동한다.
translateZ(z축) : z축 만큼 이동한다.
translate3d(translateX, translateY, translateZ) : 특정 크기만큼 3차원으로 이동한다.
scale() - 확대/축소하기
속성값으로 각 축에 대한 정보가 들어가며, 1보다 크면 확대되고, 1보다 작으면 축소 됩니다. 이때 1은 100%이다.
scale(x축, y축) : x축, y축 만큼의 배율로 확대한다.
scaleX(x축) : x축 만큼 확대/축소한다.
scaleY(y축) : y축 만큼 확대/축소한다.
scaleZ(z축) : z축 만큼 확대/축소한다.
scale3d(scaleX, scaleY, scaleZ) : 특정 크기만큼 3차원으로 확대/축소한다.
skew() - 기울이기
skew 속성 함수는 2차원 왜곡만 가능하며 지정한 각도(deg)만큼 기울여 왜곡한다. 수치 입력시 단위는 deg이다.
skew(x축_기울기, y축_기울기) : x축, y축 기울기만큼 기울기로 왜곡한다.
skewX(x축_기울기) : x축 기울기 만큼 기울인다.
skewY(y축_기울기) : y축 기울기 만큼 기울인다.
rotate() - 회전하기
rotate 변형 함수는 2차원과 3차원 회전이 가능하며, 각도만큼 시계방향(deg) 또는 반시계 방향(-deg)으로 회전한다.
rotate(x축_각도, y축_각도, z축_각도) : x축, y축, z축 각도만큼 회전한다.
rotateX(x축_각도) : x축 각도만큼 회전한다.
rotateY(y축_각도) : y축 각도만큼 회전한다.
rotateZ(z축_각도) : z축 각도만큼 회전한다.
rotate3d(angleX, angleY, angleZ) : 특정 각도만큼 3차원으로 회전한다.
예제
펼치기
transform-origin - 중심축 변환하기
해당 속성은 변환 중심축의 위치를 바꾸는 속성이다. 기준점의 기본값은 정가운데가 기준점이고, 오른쪽으로 갈수록 1~100% 아래로 갈수록 1~100%이다.
선택자{
transform-origin : x축 y축 z축;
}속성값
x축 : 백분율, left, center, right 중에서 지정한다.
y축 : 백분율, top, center, bottom 중에서 지정한다.
z축 : 길이 값만을 사용한다.
Perspective() - 원근법
perspective(20px); :
The perspective() CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the perspective CSS property — are not drawn.
The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.
Using this property with a value different than 0 and none creates a new stacking context. Also, in that case, the object will act as a containing block for position: fixed elements that it contains.
여러개의 도형에 원근법을 적용하려면 적용할 도형의 부모 태그에 perspective 속성을 주는것이 좋다.
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;transform:perspective(20px); : 변환 함수는 변환되는 요소에 적용되는 변환 값의 일부이다. 또 바로 위의 항목인 3 차원 공간에서 도형이 변환된 자식의 부모에 삽입된 perspective 및 perspective-origin 속성과 다르다.
예제
펼치기
펼치기
CSS 홈으로 돌아가기
CSS3
메인으로 돌아가기
도형 변형 속성 transform
1.
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
2.
또한 CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경한다.
3.
변형 가능한 요소만 transform할 수 있다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있다.
속성 값 모두 보기
/* 키워드 값 */
transform: none;
/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;/*형식 구문*/
where
<transform-list> = <transform-function>+
where
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
where
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )
where
<length-percentage> = <length> | <percentage>translate() - 이동하기
원하는 만큼 표시정보를 이동하게 한다.
translate(x축, y축) : x축, y축에 대한 정보를 입력하면 x축과 y축으로 이동한다.
translateX(x축) : x축 만큼 이동한다.
translateY(y축) : y축 만큼 이동한다.
translateZ(z축) : z축 만큼 이동한다.
translate3d(translateX, translateY, translateZ) : 특정 크기만큼 3차원으로 이동한다.
scale() - 확대/축소하기
속성값으로 각 축에 대한 정보가 들어가며, 1보다 크면 확대되고, 1보다 작으면 축소 됩니다. 이때 1은 100%이다.
scale(x축, y축) : x축, y축 만큼의 배율로 확대한다.
scaleX(x축) : x축 만큼 확대/축소한다.
scaleY(y축) : y축 만큼 확대/축소한다.
scaleZ(z축) : z축 만큼 확대/축소한다.
scale3d(scaleX, scaleY, scaleZ) : 특정 크기만큼 3차원으로 확대/축소한다.
skew() - 기울이기
skew 속성 함수는 2차원 왜곡만 가능하며 지정한 각도(deg)만큼 기울여 왜곡한다. 수치 입력시 단위는 deg이다.
skew(x축_기울기, y축_기울기) : x축, y축 기울기만큼 기울기로 왜곡한다.
skewX(x축_기울기) : x축 기울기 만큼 기울인다.
skewY(y축_기울기) : y축 기울기 만큼 기울인다.
rotate() - 회전하기
rotate 변형 함수는 2차원과 3차원 회전이 가능하며, 각도만큼 시계방향(deg) 또는 반시계 방향(-deg)으로 회전한다.
rotate(x축_각도, y축_각도, z축_각도) : x축, y축, z축 각도만큼 회전한다.
rotateX(x축_각도) : x축 각도만큼 회전한다.
rotateY(y축_각도) : y축 각도만큼 회전한다.
rotateZ(z축_각도) : z축 각도만큼 회전한다.
rotate3d(angleX, angleY, angleZ) : 특정 각도만큼 3차원으로 회전한다.
예제
펼치기
transform-origin - 중심축 변환하기
해당 속성은 변환 중심축의 위치를 바꾸는 속성이다. 기준점의 기본값은 정가운데가 기준점이고, 오른쪽으로 갈수록 1~100% 아래로 갈수록 1~100%이다.
선택자{
transform-origin : x축 y축 z축;
}속성값
x축 : 백분율, left, center, right 중에서 지정한다.
y축 : 백분율, top, center, bottom 중에서 지정한다.
z축 : 길이 값만을 사용한다.
Perspective() - 원근법
perspective(20px); :
The perspective() CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the perspective CSS property — are not drawn.
The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.
Using this property with a value different than 0 and none creates a new stacking context. Also, in that case, the object will act as a containing block for position: fixed elements that it contains.
여러개의 도형에 원근법을 적용하려면 적용할 도형의 부모 태그에 perspective 속성을 주는것이 좋다.
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;transform:perspective(20px); : 변환 함수는 변환되는 요소에 적용되는 변환 값의 일부이다. 또 바로 위의 항목인 3 차원 공간에서 도형이 변환된 자식의 부모에 삽입된 perspective 및 perspective-origin 속성과 다르다.
예제
펼치기
펼치기
CSS 홈으로 돌아가기
CSS3
메인으로 돌아가기
도형 변형 속성 transform
1.
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
2.
또한 CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경한다.
3.
변형 가능한 요소만 transform할 수 있다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있다.
속성 값 모두 보기
/* 키워드 값 */
transform: none;
/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;/*형식 구문*/
where
<transform-list> = <transform-function>+
where
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
where
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )
where
<length-percentage> = <length> | <percentage>translate() - 이동하기
원하는 만큼 표시정보를 이동하게 한다.
translate(x축, y축) : x축, y축에 대한 정보를 입력하면 x축과 y축으로 이동한다.
translateX(x축) : x축 만큼 이동한다.
translateY(y축) : y축 만큼 이동한다.
translateZ(z축) : z축 만큼 이동한다.
translate3d(translateX, translateY, translateZ) : 특정 크기만큼 3차원으로 이동한다.
scale() - 확대/축소하기
속성값으로 각 축에 대한 정보가 들어가며, 1보다 크면 확대되고, 1보다 작으면 축소 됩니다. 이때 1은 100%이다.
scale(x축, y축) : x축, y축 만큼의 배율로 확대한다.
scaleX(x축) : x축 만큼 확대/축소한다.
scaleY(y축) : y축 만큼 확대/축소한다.
scaleZ(z축) : z축 만큼 확대/축소한다.
scale3d(scaleX, scaleY, scaleZ) : 특정 크기만큼 3차원으로 확대/축소한다.
skew() - 기울이기
skew 속성 함수는 2차원 왜곡만 가능하며 지정한 각도(deg)만큼 기울여 왜곡한다. 수치 입력시 단위는 deg이다.
skew(x축_기울기, y축_기울기) : x축, y축 기울기만큼 기울기로 왜곡한다.
skewX(x축_기울기) : x축 기울기 만큼 기울인다.
skewY(y축_기울기) : y축 기울기 만큼 기울인다.
rotate() - 회전하기
rotate 변형 함수는 2차원과 3차원 회전이 가능하며, 각도만큼 시계방향(deg) 또는 반시계 방향(-deg)으로 회전한다.
rotate(x축_각도, y축_각도, z축_각도) : x축, y축, z축 각도만큼 회전한다.
rotateX(x축_각도) : x축 각도만큼 회전한다.
rotateY(y축_각도) : y축 각도만큼 회전한다.
rotateZ(z축_각도) : z축 각도만큼 회전한다.
rotate3d(angleX, angleY, angleZ) : 특정 각도만큼 3차원으로 회전한다.
예제
펼치기
transform-origin - 중심축 변환하기
해당 속성은 변환 중심축의 위치를 바꾸는 속성이다. 기준점의 기본값은 정가운데가 기준점이고, 오른쪽으로 갈수록 1~100% 아래로 갈수록 1~100%이다.
선택자{
transform-origin : x축 y축 z축;
}속성값
x축 : 백분율, left, center, right 중에서 지정한다.
y축 : 백분율, top, center, bottom 중에서 지정한다.
z축 : 길이 값만을 사용한다.
Perspective() - 원근법
perspective(20px); :
The perspective() CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the perspective CSS property — are not drawn.
The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.
Using this property with a value different than 0 and none creates a new stacking context. Also, in that case, the object will act as a containing block for position: fixed elements that it contains.
여러개의 도형에 원근법을 적용하려면 적용할 도형의 부모 태그에 perspective 속성을 주는것이 좋다.
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;transform:perspective(20px); : 변환 함수는 변환되는 요소에 적용되는 변환 값의 일부이다. 또 바로 위의 항목인 3 차원 공간에서 도형이 변환된 자식의 부모에 삽입된 perspective 및 perspective-origin 속성과 다르다.
예제
펼치기
펼치기
CSS 홈으로 돌아가기
CSS3
메인으로 돌아가기
도형 변형 속성 transform
1.
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
2.
또한 CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경한다.
3.
변형 가능한 요소만 transform할 수 있다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있다.
속성 값 모두 보기
/* 키워드 값 */
transform: none;
/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;/*형식 구문*/
where
<transform-list> = <transform-function>+
where
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
where
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )
where
<length-percentage> = <length> | <percentage>translate() - 이동하기
원하는 만큼 표시정보를 이동하게 한다.
translate(x축, y축) : x축, y축에 대한 정보를 입력하면 x축과 y축으로 이동한다.
translateX(x축) : x축 만큼 이동한다.
translateY(y축) : y축 만큼 이동한다.
translateZ(z축) : z축 만큼 이동한다.
translate3d(translateX, translateY, translateZ) : 특정 크기만큼 3차원으로 이동한다.
scale() - 확대/축소하기
속성값으로 각 축에 대한 정보가 들어가며, 1보다 크면 확대되고, 1보다 작으면 축소 됩니다. 이때 1은 100%이다.
scale(x축, y축) : x축, y축 만큼의 배율로 확대한다.
scaleX(x축) : x축 만큼 확대/축소한다.