HTML5+CSS3でサイトを作ってみる。

■ 回転・伸縮

回転、拡大しながら移動

マウスオンでアクションします。

サンプルhtml

--[ html ]-----------------------

<div class="anime01">
	<img src="./img/ball.png" width="50px" height="50px">
</div>

--[ CSS ]------------------------

.anime01 {
	width: 50px;
	height: 50px;
	-webkit-transition:1s ease-in-out;
	-webkit-transform-origin: 50% 50%;
	transition:1s ease-in-out;
	transform-origin: 50% 50%;
}
.anime01:hover {
	-webkit-transform: translate(100px, 0) scale(1.8) rotate(1080deg);
	transform: translate(100px, 0) scale(1.8) rotate(1080deg);
}

クリックで回転

クリックでアクションします。(※webkit系のみ)

サンプルhtml

--[ html ]-----------------------

<div class="anime02" onclick="this.style.webkitTransform='rotate(360deg)'">  
	<img src="./img/ball.png" width="50px" height="50px">
</div>

--[ CSS ]------------------------

.anime02 {
	width: 50px;
	height: 50px;
	-webkit-transition: 2s ease-in;
	-webkit-transform-origin: 50% 50%;
}

キック01

オンマウスでアクションします。

サンプルhtml

--[ html ]-----------------------

<div class="kick"><img src="./img/ball.png"></div>

--[ CSS ]------------------------

.kick {
	width: 50px;
	height: 50px;
	-webkit-transition:1s ease-in-out;
	-webkit-transform-origin: 100% 0%;
	transition:1s ease-in-out;
	transform-origin: 100% 0%;
}
.kick:hover {
	-webkit-transform: translate(500px, 200px) scale(1.8) rotate(100deg);
	transform: translate(500px, 200px) scale(1.8) rotate(100deg);
}

キック02

オンマウスでアクションします。

サンプルhtml

--[ html ]-----------------------

<div class="kick2"><img src="./img/ball.png"></div>

--[ CSS ]------------------------

.kick2 {
	width: 50px;
	height: 50px;
	-webkit-transition:1s ease-in-out;
	-webkit-transform-origin: 0% 0%;
	transition:1s ease-in-out;
	transform-origin: 0% 0%;
}
.kick2:hover {
	-webkit-transform: translate(50px, -100px) scale(-1.8) rotate(200deg);
	transform: translate(50px, -100px) scale(-1.8) rotate(200deg);
}