Question

我想在这里获得一个效果：http://www.webdesigncrowd.com/demo/cube-rotate-menu-12.16.13/但是对于水平项目。所以我希望它不是水平垂直翻转。

我尝试了以下但没有得到我想要的效果：

＆＃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);
    }

＆＃13;

<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>

＆＃13;

小提琴：http://jsfiddle.net/Ff3qW/

Answer 1

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>

Answer 2

我使用matrix3d为垂直翻转创建了一个小提琴作为示例。我也试着理解matrix3d。您可以使用此示例中的值： http://jsbin.com/xidiyosiba/2/

使用matrix3d在悬停上获得垂直立方体旋转

2 个答案: