博客

相信大伙子在网上回看到一些比较好玩的按钮或者导航栏，其目的都是为了提高用户体验，下面是一个纯css3按钮翻转的小案例，大家有需要可以参考一下！！！

html代码：

		<div class="nav">
			<ul>
				<li>
					<a href="#">
						<span>选项一</span>
						<span>选项1</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>选项二</span>
						<span>选项2</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span>选项三</span>
						<span>选项3</span>
					</a>
				</li>
			</ul>
		</div>

css代码：

			.nav{
				padding: 50px;
				margin: 0;
			}
			ul li{
				float: left;
				list-style: none;
				padding: 0 15px;
				/*景深*/
				-webkit-perspective: 800px;
			}
			.nav a{
				float: left;/*0000000*/
				text-decoration: none;
				position: relative;
				font:14px/30px "宋体";
				/*3d场景*/
				-webkit-transform-style: preserve-3d;
				transition: 0.5s ease;
				/*设置旋转中心 xyz*/
				-webkit-transform-origin: center center 15px;
			}
			.nav span{
				float: left;
				width: 80px;
				text-align: center;
				/*background: palegreen;*/
				/*设置背面为不可见*/
				-webkit-backface-visibility: hidden;
				border: 1px solid #ccc;
			}
			.nav span:nth-of-type(1){
				position: absolute;
				left: 0;
				top: -30px;
				/*background: pink;*/
				-webkit-transform-origin: bottom;
				-webkit-transform: rotateX(-90deg);
			}
			.nav a:hover{
				-webkit-transform: rotateX(90deg);
			}

难度不大，基础的css3属性就可实现以上效果。