1
3D 변환 rotateY를 넣은 verticle 탐색 메뉴가 있습니다. 저는 -25도 회전 시켰고, hover 상태를 0deg로 되돌리기를 원합니다. 그것은 효과적 이었지만, 전환을 적용하여이를 부드럽게 만들 때 전환이 발생하지 않았습니다. 내가 관련 있다고 생각하는 코드 만 게시 할 것입니다. 탐색 및 주요 컨테이너내비게이션에서 CSS 전환이 작동하지 않습니다.
<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 --!>
그리고 이제 CSS에 대한
HTML
ul {
position: absolute;
left: 0;
right: 0;
padding: 0;
width: 200px;
height: 310px;
list-style: none;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
margin-left: 50px;
margin-top: 43px;
}
.nav ul li {
text-align: left;
text-decoration: none;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-top: 20px;
-webkit-transform:rotateY(25deg);
-moz-transform:rotateY(25deg);
-o-transform:rotateY(25deg);
transform:rotateY(25deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: transform 1s ease 0s;
-moz-transition: transform 1s ease 0s;
-o-transition: transform 1s ease 0s;
transition: transform 1s ease 0s;
}
.nav ul li:hover {
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
}
.nav ul li a {
font-size: 36px;
text-decoration: none;
color: #FFFFFF;
-webkit-transition: 500ms ease;
}
.nav ul li a:hover {
color: #CCCCCC;
}
당신이 볼 수 있듯이, 나는에 나의 로고 이미지를 넣어 그 조금 이상한 것을 메뉴의 로고를 회전 시키려면 메뉴의 바니시닝 점과 정확하게 일치해야합니다. 게다가, 홈 링크를 로고로 대체 할 수 있습니다. 홈 링크로 사용할 수 있습니다. 나는 어딘가에서 간단한 실수를 저질렀습니다 ... 어쨌든 모든 도움을 주시면 감사하겠습니다.
감사합니다. 접두어와 같은 간단한 것으로 알고 있습니다. :) – Leto