> 웹 프론트엔드 > CSS 튜토리얼 > CSS3 자세한 설명: 변환

CSS3 자세한 설명: 변환

高洛峰
풀어 주다: 2017-02-17 13:19:16
원래의
1380명이 탐색했습니다.

CSS3 변환이란 무엇입니까?

변환은 변경, 변형을 의미합니다.

CSS3 변환의 공통 속성은 무엇입니까?

변환의 속성은 다음과 같습니다. 곧. .

각 속성의 사용법을 분석해 보겠습니다.

transform:rotate():

의미: 회전, 여기서 "deg"는 "10deg"를 의미합니다. "는 "10도"를 의미하며, 아래와 같습니다.

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)

transform:skew( ):

의미: 기울어짐;

.demo_transform2{-webkit-transform:skew(20deg);

변형 :scale():

의미: 비율; "1.5"는 1.5배로 확대한다는 뜻이고, 2배로 확대하려면 "2.0"이라고 써야하고, 축소하려면, 음수 "-"입니다.

.demo_transform3{-webkit-transform:scale

transform:translate():

의미: 변화, 변위 ;다음은 오른쪽으로 120픽셀 변위를 의미합니다. 위쪽으로 변위되면 다음 "0"을 다른 값으로 변경하면 됩니다. 왼쪽과 아래쪽으로 변위되면 음수 "-"가 됩니다.

.demo_transform4{-webkit-transform:translate

변환 합성:

이것은 변환의 일반적인 속성입니다. 아래에서는 CSS3 변환의 포괄적인 예를 보여주기 위해 전환의 도움을 사용합니다:

.demo_transform5{-webkit-transition:all 1seasy-in-out;-moz-transition:all 1seasy-in-out }
.demo_transform5:hover{-webkit-transform:rotate(360deg) 기울이기

-ms-transform:rotate(7deg) ms는 즉, 커널 식별 코드

-moz-transform:rotate(7deg);             //-moz는 Firefox 커널 식별 코드를 나타냅니다.  

-webkit-transform:rotate(7deg);                  식별 코드

-o-transform:rotate(7deg); . . w3c 표준을 준수하는 이 문장을 적는 것이 가장 좋습니다

CSS3에 대한 더 자세한 설명은 :Transform 관련 글은 PHP 중국어 홈페이지를 주목해주세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿