ポケストップ

タイプマイクロインタラクション系 その他 類似の音

目次

オノマトペ

:hoverすべし

入力フォームに応用

ソースコード

あくまでも一例なので参考程度に使ってください。

ポケストップHTML

<div class="sample">
<div class="omote"><img src="/wp-content/themes/onmtp/imgs/neko1.png"></div>
<div class="ura"><img src="/wp-content/themes/onmtp/imgs/neko2.png"></div>
</div>

ポケストップCSS


.sample {
	position: relative;
	transform: perspective(500);
	transform-style: preserve-3d;
}
.sample .omote,
.sample .ura {
	margin: 0 auto;
	padding: 20px;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 50% 50%;
	transition: .6s all ease-in-out;
	backface-visibility: hidden;
}
.sample .omote {
	background-color: #6C85FC;
	transform: rotateY(0);
}
.sample .ura {
	background-color:#F86F71;
    transform: rotateY(-1260deg);
}
.sample:hover .omote {
background-color: #6C85FC;
	transform: rotateY(-1260deg);
}
.sample:hover .ura {
	background-color:#F86F71;
    transform: rotateY(0);
}
.sample .omote img,
.sample .ura img {
	width: 100px;
	height: 100px;
}

使い方

  • このバナー、オンマウスしたら「ポケストップ」的な動きにできますか？
  • ここ入力フォーム、入力完了して問題なかったら「必須」マークから「OK」マークに「ポケストップ」させて！