錄制_2017_02_05_20_43_10_297.gif
代碼演示：(復(fù)制代碼可用)##
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
margin:0;
padding:0;
}
html,body,ul{
width: 100%;
height: 100%;
background: skyblue;
position: relative;
}
ul{
display: flex;
justify-content: flex-start;
}
/*控制li標(biāo)簽*/
ul>li:nth-child(1){
/*background: red;*/
width: 150px;
height: 40px;
left:500px;
top:100px;
border-radius: 50%;
transform-origin: center;
position: relative;
transform-style: preserve-3d;
transition: all 1s;
}
ul>li:nth-child(1):hover{
transform: rotateX(90deg);
transition: all 1s;
}
/*控制div*/
ul>li:nth-child(1) div{
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
/*transform-origin: center top;*/
}
/*第三部分*/
ul>li:nth-child(1) div:nth-child(1){
position: absolute;
background: green;
transform: rotateX(0deg) translateZ(20px);
}
ul>li:nth-child(1) div:nth-child(2){
position: absolute;
background: yellow;
transform: rotateX(-90deg) translateZ(20px);
}
</style>
<body>
<ul>
<li>
<div>3d導(dǎo)航</div>
<div>Web前端</div>
</li>
</ul>
</body>
</html>
