我想在这里得到一个效果:http://www.webdesigncrowd.com/demo/cube-rotate-menu-12.16.13/但对于水平元素。所以我希望它垂直翻转而不是水平翻转。
我尝试了以下但没有得到我想要的效果:
.navbar li {
float: left;
margin-left: 20px;
list-style-type: none;
position: relative;
}
navbar a.link span.active,
.navbar a.link span.hover {
display: table;
position: absolute;
width: 100%;
height: 100%;
top: 0;
transform-origin: 0% 50% 0px;
-webkit-transform-origin: 0% 50% 0px;
transition: .2s;
-webkit-transition: .2s;
border-bottom: 1px solid #555;
}
.navbar a.link span.active {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
left: 0;
background-color: #444;
}
.navbar a.link:hover span.active {
background-color: #999;
transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, -50, 0, 0, 1);
-webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, -50, 0, 0, 1);
}
.navbar a.link span.active .vertical {
color: #aaa;
}
.navbar a.link span.hover {
transform: matrix3d(0, 0, -1, 0.00166, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
-webkit-transform: matrix3d(0, 0, -1, 0.00166, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
left: 91%;
background-color: #ccc;
}
.navbar a.link:hover span.hover {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166, -50, 0, 0, 1);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166, -50, 0, 0, 1);
}<div class="navbar">
<ul>
<li>
<a class="link" href="#">
<span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
<span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
</a>
</li>
<li>
<a class="link" href="#">
<span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
<span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
</a>
</li>
<li>
<a class="link" href="#">
<span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
<span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
</a>
</li>
</ul>
</div>fiddle :http://jsfiddle.net/Ff3qW/
最佳答案
By using transfrom scale we can rotate image vertically.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container {
position: absolute;
width: 50%;
height: 20%;
}
#info1:hover {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv; /*IE*/
top: 1px;
position: relative;
}
#info1{
transition: 1s;
}
</style>
</head>
<body>
<div id="container">
<img id="info1" src="info.png" alt="icons" />
</div>
</body>
</html>
关于css - 使用 matrix3d 在悬停时获得垂直立方体旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22554363/