<!DOCTYP html>
<html>
<head>
<style type=""text/css">
div
{
width: 150px;
height: 200px;
background-color: Yellow;
-webkit-transition: width 8s,
-webkit-transform 8s;
}
div:hover
{
-webkit-transform: rotate(30deg);
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<div>Test border</div>
</body>
<html>
------------------------------------------------
เมื่อคลิกที่รูปสีเหลืองรูปจะเปลี่ยนสีเป็นสีแดง รูปค่อย ๆ เอียง พร้อมกับขยายขนาดเป็นดังรูป