CSS3 상세 정보:transform
1462 단어 transform
transform의 속성은rotate()/skew()/scale()/translate(,)를 포함하고 각각 x, y의 구분이 있다. 예를 들어rotatex()와rotatey()를 포함한다.
다음은 각 속성의 사용 방법을 설명합니다.
transform:rotate():
회전그 중에서'deg'는'도'의 뜻이다. 예를 들어'10deg'는'10도'의 아래와 같다.
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
transform:skew():
기울다
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale():
비례'1.5'는 1.5의 비율로 확대하는 것을 의미하며, 2배로 확대하려면'2.0'이라고 써야 하고, 축소하면 마이너스'-'라고 한다.
demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
transform:translate():
변동아래는 120픽셀을 오른쪽으로 이동하고, 위로 이동하면 뒤의 '0' 값을 바꾸면 되고, 왼쪽에서 아래로 이동하면 마이너스 '-' 이다.
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
transform 통합:
transform의 상용 속성은 바로 이것입니다. 다음은 transition의 도움을 빌려 css3 transform에 대한 종합적인 실례를 보여 드리겠습니다.
.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[220414_TIL] css transform vs positioningcss에서 element의 위치를 변경하는 방법 중에 transform과 positioning(top, left..) 가 있다. 둘 다 육안으로 보이는 결과화면은 같지만, 어떤 상황에서 무엇을 쓰는 게 더 적절할지 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
