Html
    Css
    Js

    
                        
* {
	/*清除默认样式*/
    margin:0;
	padding:0;
	list-style:none;
	border:0;
}
ul {
	/*设置大盒子的大小,背景颜色,居中*/
    width:600px;
	background:#F90;
	color:#fff;
	margin:50px auto;
}
li {
	/*设置小盒子的大小,向左浮动,保存嵌套元素的3D空间 ,3D距离*/
    width:150px;
	height:40px;
	transition:all 0.4s ease 0s;
	float:left;
	position:relative;
	transform-style:preserve-3d;
	perspective:6000px
}
li:hover {
	/*使他沿X轴逆旋转90度*/
    transform:rotateX(-90deg);
}
span {
	/*设置盒子大小,行高,字体居中,绝对定位*/
    width:150px;
	height:40px;
	line-height:40px;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
}
li .no1 {
	background:#F60;
	transform:translateZ(20px);
}
li .no2 {
	background:#39F;
	transform:rotateX(90deg) translateZ(20px);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css翻转导航条(原创)

更新时间:2021-06-22 01:12:01

0