CSS3 전환 + 변환

다음 예제에서는 전환 효과에 변형을 추가합니다.

예

div {

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */

    transition: width 2s, height 2s, transform 2s;

}

<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 100px;

    background: red;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */

    transition: width 2s, height 2s, transform 2s;

}

div:hover {

    width: 300px;

    height: 300px;

    -webkit-transform: rotate(180deg); /* Safari */

    transform: rotate(180deg);

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>