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