2 Dアニメーション効果変換での回転とパン効果
3535 ワード
<html>
<head>
<meta charset="UTF-8">
<title>2D title>
<style>
#mydiv{
width: 200px;
height: 200px;
background-color: red;
margin:200px;
}
#mydiv:hover{
transition: all 4s;
/* */
/*transform: translateY(-150PX);
-webkit-transform: translateY(-150px);*/
/* */
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
/* */
transform-origin: 50%,50%;
-webkit-transform-origin:50% 50% ;
}
style>
head>
<body>
<div id="mydiv">div>
body>
html>