2
나는 클릭 할 수있는 이미지가있어 다른 이미지가 위아래로 슬라이드됩니다. 그런 다음 애니메이션 이미지를 클릭하여 이미지를 다시 슬라이드 아웃시킬 수 있습니다. 이것은 잘 작동합니다. 그러나 실제로 왼쪽에서 오른쪽으로보다는 아래에서 위로 이미지를 슬라이드하고 싶습니다. 그러나 왼쪽 속성을 맨 위로 변경하면 (주석이있는 코드 참조) 전환 중 하나가 중단됩니다. 나는 이것이 JS 일 수 있다는 것을 알고 있지만 단지 CSS를 사용하여 이것을 달성 할 수 있는지 알고 싶다. (마우스를 클릭하지 않고 클릭 만하면 수직 트윈을 사용할 수 있지만 클릭이 필요합니다!) 고맙습니다.CSS3 웹킷 전환
<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>
. 브라우저가 오버플로 된 div를 스크롤하고 * 다음에 전환을 적용합니다. http://jsfiddle.net/NWcXW/ – Duopixel
설명해 주셔서 감사합니다. 나는 포기하고 JS를 사용할 것입니다! – cass