Transition (5)

Transition 예제 (5)

<!DOCTYPE html>

<head>

<title>Step02_Transform.html</title>

<style>

.box{

width: 100px;

height: 100px;

border: 1px solid red;

cursor: pointer;

background-color: yellow;

transition: transform 0.4s ease-out; /* 나중에 천천히 */

}

.box:hover {

/* 평행이동, 확대, 축소, 회전, 비틀기 등을 수행할수 있는 transform 속성 */

transform: translateX(50px) translateY(50px) rotate(45deg) scale(1.5);

}

</style>

</head>

<body>

<h1>transform 테스트</h1>

</div>

</body>

</html>

평행이동, 확대, 축소, 회전, 비틀기 등을 수행할 수 있는 transform 의 속성이다

transform : translate

웹브라우저 실행)

Rubbery