Html CSS转换不适用于导航_Html_Css_Css Transitions_Css Transforms

Html CSS转换不适用于导航

html css

Html CSS转换不适用于导航,html,css,css-transitions,css-transforms,Html,Css,Css Transitions,Css Transforms,我有一个垂直导航菜单，我把三维变换旋转。我将其旋转了-25度，我希望悬停状态将其恢复到0度。这是可行的，但当我应用一个过渡来平滑它时，并没有过渡发生。我只发布我认为相关的代码导航和主容器的HTML <body>  <div class="maincontainer">   &

我有一个垂直导航菜单，我把三维变换旋转。我将其旋转了-25度，我希望悬停状态将其恢复到0度。这是可行的，但当我应用一个过渡来平滑它时，并没有过渡发生。我只发布我认为相关的代码

导航和主容器的HTML

<body>

<!-- Container -->
<div class="maincontainer">

<!-- The header markup would be here. -->

<!-- Navigation -->
<div class="nav">
            <ul>
                <li><a id="home" href="index.html"><img src="images/logo.png"         width="279" height="140" alt="FreeSky" /></a></li>
                <li><a id="home" href="index.html">//Home</a></li>
                <li><a id="about" href="about.html">//About</a></li>
                <li><a id="services" href="services.html">//Services</a></li>
                <li><a id="portfolio" href="portfolio.html">//Portfolio</a></li>
                <li><a id="contact" href="contact.html">//Contact</a></li>
            </ul>
        </div> 

 <!-- content markup and footer would be here --!>

 </div> <!-- Main container end --!>

正如你所看到的，我把我的徽标图像放进菜单有点奇怪，但那是因为我希望徽标的旋转Y与菜单的旋转Y正确对齐（相同的消失点）。此外，我可以替换为标志的主页链接，如果有的话，有作为主页链接。我打赌我在某处犯了一个简单的错误。。。无论如何，我们非常感谢您的帮助。

这是

transform

属性的Webkit转换的问题。将

transform

更改为

-webkit transform

可以解决此问题

-webkit-transition: -webkit-transform 1s ease 0s;

谢谢，我知道这很简单，比如我没想到的前缀：）

-webkit-transition: -webkit-transform 1s ease 0s;