CSS3 변환에 대한 자세한 소개

최근 HTML5와 CSS3의 개발 속도는 여전히 인상적입니다. 국내외에는 최신 기술을 사용하는 크고 멋진 웹사이트가 많이 있습니다. 새로운 기술 앞에서 우리는 이를 어떻게 올바르게 파악하고 향후 실제 프로젝트에서 활용해야 할까요? 이 문제에 대해 Haozi는 CSS3를 분석하고 CSS3가 얼마나 마법적인 것인지 학생들에게 하나씩 설명하기로 결정했습니다. 그냥 변신 시작해 보세요. 잘 안 써진다면 한번 시도해 보세요! !

CSS3 변환이란 무엇입니까?

transform의 의미는 변경, 변형입니다.

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

변환의 속성은 다음과 같습니다:rotate()/skew()/scale()/translate(,), 이는 각각 x와 y로 나뉩니다(예:rotatex() 및roty()등).

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

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배율로 확대한다는 의미입니다. 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
)
}

위 내용은 CSS3 변환에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!