巧みにcss 3で簡単に矢印の上下回転を実現

css 3のtransform-origin、transform、transitionプロパティを巧みに使用して、矢印の上下回転効果を簡単に実現します.コードを見てください:

cssで実現できるので、先端を作るには福音ですね.O(∩∩)Oハハ~

.test{margin:0;padding:0;list-style:none;border:1px solid #000;}
.test li{height:50px;background:#fff;text-align:center;}
.test li a{
	border:3px solid #666;
	border-width:3px 0 0 3px;
	display:inline-block;
	height:8px;
	-moz-transform-origin:center center;
	-moz-transform:rotate(45deg);
	-moz-transition:all .5s ease-in .1s;
	-webkit-transform-origin:center center;
	-webkit-transform:rotate(45deg);
	-webkit-transition:all .5s ease-in .1s;
	-o-transform-origin:center center;
	-o-transform:rotate(45deg);
	-o-transition:all .5s ease-in .1s;
	-ms-transform-origin:center center;
	-ms-transform:rotate(45deg);
	-ms-transition:all .5s ease-in .1s;
	transform-origin:center center;
	transform:rotate(45deg);
	transition:all .5s ease-in .1s;
	width:8px;}
.test li a:hover{
	-moz-transform:rotate(-15deg);
	-moz-transition:all .5s ease-in .1s;
	-webkit-transform:rotate(225deg);
	-webkit-transition:all .5s ease-in .1s;
	-o-transform:rotate(-45deg);
	-o-transition:all .5s ease-in .1s;
	-ms-transform:rotate(-45deg);
	-ms-transition:all .5s ease-in .1s;
	transform:rotate(-45deg);
	transition:all .5s ease-in .1s;
}

このコードはie 8および以下のブラウザをサポートしていません.