Левый-правый
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider {
width: 100px;
height: 200px;
background-image: url(http://file.mobilmusic.ru/11/54/a5/952948-400.jpg);
background-size: 100px 200px;
background-repeat: no-repeat;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-ms-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
}
.r:checked ~ .slider{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-ms-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
</style>
</head>
<body>
<input name="r" type="radio" checked="checked">
<input name="r" type="radio" class="r">
<div class="slider"></div>
</body>
</html>