2
我有一個圖像可以被點擊，導致另一個圖像在上面滑動。然後，您可以通過單擊動畫圖像再次滑出圖像。這工作正常。但我實際上喜歡將圖像從下向上滑動，而不是從左向右滑動，但是如果將左側屬性更改爲上（請參閱註釋代碼），則會跳轉其中一個轉換。我知道我可以做到這一點是JS，但我只想知道是否有可能實現這一點只使用CSS。 （如果我使用懸停而不是點擊，我可以使垂直補間工作，但是我需要點擊）！謝謝。CSS3 webkit轉換
<html lang="en">
<head>
<meta charset="utf-8" />
<title>images</title>
<style>
#container {
width: 600px;
margin: 20px auto;
text-align: center;
}
#image {
width: 400px;
height: 250px;
overflow: hidden;
margin: 20px auto;
position: relative;
}
#image img {
position:relative;
left:-400px;
/*top: 230px;*/
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#image img:target {
position:relative;
left:0px;
/*top: 0px;*/
}
#image2
{
height: 40px;
width: 400px;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>CSS3 Image Slider</h1>
</header>
<section>
<div id="image">
<a href="#">
<img id="image1" src="http://flickholdr.com/400/250/tree.jpg" />
</a>
</div>
<div>
<a href="#image1">
<img id="image2" src="http://flickholdr.com/400/250/flower.jpg" />
</a>
</div>
<section>
<footer>
</footer>
</div>
</body>
</html>
這將是艱難的，而不JS來解決。瀏覽器滾動overflown div，然後*應用轉換。見http://jsfiddle.net/NWcXW/ – Duopixel
感謝您的解釋。我想我會放棄並使用JS！ – cass