transform-style:flat | preserve-3d；
3d透视属性。针对子元素如何在3d空间相对其父元素渲染，这个属性声明在父元素上，并且他的子元素使用了transform才会有效。有两个属性值，一个是flat平面，这也是默认值；一个是preserve-3d当子元素使用transform时，保留其3d的位置也就是3d透视。本示例3d菜单翻转动画中，使用了transform的3d变形属性，包括旋转和移动。当鼠标移入该菜单，该元素做3d翻转动画；鼠标离开后，还原至初始状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3实现3d菜单翻转</title>
<style type="text/css">
.nav{
width: 980px;
margin: 50px auto;
background-color: #fdfdfd;
border: 1px #cccccc solid;
}
.nav:after{
/*本段css主要是解决header标签中的子元素因为浮动而未将header高度撑起来的问题*/
clear: both;
display: block;
overflow: hidden;
content: "";
}
.nav .item{
width: 200px;
height: 100px;
float: left;
border-right: 5px #333333 solid;
/*3d元素距离视图的距离，当元素设置perspective时，它的子元素会获得一个透视的效果，而不是元素的本身
其实就是z轴的距离，从屏幕到屏幕里面的距离*/
-webkit-perspective: 4000px;
-moz-perspective: 4000px;perspective: 4000px;
}
.nav .item:last-child{
border-right: none;
}
.nav .item a{
display: block;
height: 100px;
/*去掉超链接默认的下边线*/
text-decoration: none;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.nav .item a p{
height: 100px;
margin: 0;
/*设置行高，设置文字距上距下的高，包括文字的高度。这里与height同高，即垂直方向居中*/
line-height: 100px;
color: #ffffff;
text-align: center;
font-size: 20px;
font-famiy: "Microsoft Yahei";
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.nav .item a p:first-child{
background-color: #009900;
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
}
.nav .item a p:last-child{
background-color: #000099;
-webkit-transform: translateZ(50px) rotateX(-90deg);
-moz-transform: translateZ(50px) rotateX(-90deg);
-ms-transform: translateZ(50px) rotateX(-90deg);
-o-transform: translateZ(50px) rotateX(-90deg);
transform: translateZ(50px) rotateX(-90deg);
margin-top: -50px;
}
.nav .item a:hover{
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.nav .item a:hover p:last-child{
margin-top: 0;
-webkit-transform: translateZ(0) rotateX(-90deg);
-moz-transform: translateZ(0) rotateX(-90deg);
-ms-transform: translateZ(0) rotateX(-90deg);
-o-transform: translateZ(0) rotateX(-90deg);
transform: translateZ(0) rotateX(-90deg);
}
</style>
</head>
<body>
<header class="nav">
<div class="item">
<a href="#">
<p>首页</p>
<p>Home</p>
</a>
</div>
<div class="item">
<a href="#">
<p>问答</p>
<p>Q & A</p>
</a>
</div>
<div class="item">
<a href="#">
<p>关于我们</p>
<p>About us</p>
</a>
</div>
</header>
</body>
</html>
原文地址：https://www.cnblogs.com/xiaobaizhiqian/p/8379666.html
时间： 2024-10-09 08:43:27