maximamus,
не совсем то но похоже )))
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 100px;
}
.tab1 {
background: #FFCC00;
}
.tab2{
background: #66CC66;
}
.tab3 {
background: #3399CC;
}
label {
transition: all 0.8s ease-out;
width: 200px;
height: 100px;
position: absolute;
left :0;
top: 10px;
border: #FF3300 1px solid;
}
#slide1:checked ~ label:nth-of-type(1),
#slide2:checked ~ label:nth-of-type(2),
#slide3:checked ~ label:nth-of-type(3){
left: 200px;
}
#slide1:checked ~ label:nth-of-type(3){
left: 400px;
}
#slide1:checked ~ label:nth-of-type(2){
left: 0px;
}
#slide2:checked ~ label:nth-of-type(1){
left: 0px;
}
#slide2:checked ~ label:nth-of-type(3){
left: 400px;
}
#slide3:checked ~ label:nth-of-type(2){
left: 400px;
}
#slide3:checked ~ label:nth-of-type(1){
left: 0px;
}
input{
display: none;
}
</style>
</head>
<body>
<input type=radio name=slider id=slide1 />
<input checked type=radio name=slider id=slide2 />
<input type=radio name=slider id=slide3 />
<label for=slide1><div class='tab1'>1</div></label>
<label for=slide2><div class='tab2'>2</div></label>
<label for=slide3><div class='tab3'>3</div></label>
</body>
</html>
