<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>HTML5</title>
<link rel="stylesheet" href="mybox.css"/>
</head>
<body>
<div id="box">
<p id="text">oraclejava</p>
</div>
</body>
</html>
body {
text-align:center;
}
#box {
display:block;
width:500px;
margin: 50px auto;
padding: 15px;
text-align:center;
border:1px solid blue;
background: orange;
-webkit-transition: -webkit-transform 2s, background 2s;
/*
-webkit-transform:rotate(360deg);
-webkit-transform:translate(100px, 100px) rotate(30deg) scale(.8);
*/
}
#text {
font:bold 30px Century Gothic;
text-shadow:rgb(110, 110, 110) 3px 3px 5px;
-webkit-transform:skew(30deg);
}
#box:hover{
background: rgb(157, 207, 73);
-webkit-transform:translate(100px, 100px) rotate(360deg) scale(.8);
}
'자바 스크립트' 카테고리의 다른 글
| html5 Geolocation (0) | 2013.02.11 |
|---|---|
| html5 구글맵 (0) | 2013.02.11 |
| html5 비디오 (0) | 2013.02.11 |
| html5 사이트구축 -webkit-box (0) | 2013.02.11 |
| html5 site구축 (0) | 2013.02.11 |