Arrows pure CSS image slider - html

Question

So far only the middle slide has correct arrow pointing to the left on the left side and arrow pointing to the right on the right side. But i cannot manage to make when you are on either left or right slide the arrows to be pointing to the right way.
Thank you!
http://codepen.io/anon/pen/WvZGdb
HTML
<div id="slides">
<input type="radio" name="slider" id="slide1" class="set"/>
<input checked type="radio" name="slider" id="slide2" class="set"/>
<input type="radio" name="slider" id="slide3" class="set"/>
<div class="mask">
<div class="overflow">
<div class="slide"><img src="../images/work.png"/></div>
<div class="slide"><img src="../images/work.png"/></div>
<div class="slide"><img src="../images/work.png"/></div>
</div>
</div>
<div id="controls" onclick="">
<label for="slide1">1</label>
<label for="slide2">2</label>
<label for="slide3">3</label>
</div>
</div>
</div>
CSS
input.set {
display:none;
}
#slide1:checked ~ .mask .overflow { margin-left:0; }
#slide2:checked ~ .mask .overflow { margin-left:-640px; }
#slide3:checked ~ .mask .overflow { margin-left:-1280px; }
#slides {
margin:auto;
width:760px;
position:relative;
background-color:#096;
}
#slides .mask {
width:640px;
overflow:hidden;
margin:auto;
}
#slides .overflow {
width:300%;
-webkit-transition: ease-out 0.5s;
}
#slides .slide {
width: 640px;
height:480px;
float:left;
background: silver;
}
#controls label {
display:none;
width:60px;
height:60px;
opacity:0.5;
position:absolute;
top:50%;
margin-top:-30px;
cursor:pointer;
background:#0C0;
}
#controls label:hover {
opacity:1;
}
#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(2) { right:0; display:block; }
#slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2) { left:0; display:block; }

Answer 1

I don't know if I got you right but I can try. From what I read you want the arrow on the last slide to "shift" backward ("<").
There are few approaches to this solution.
First way
You add a class when it's on the last div and simply rotate if for 180 deg.
#slide3:checked ~ #controls label:nth-child(2) {
transform: rotate(180deg);}
Second way
As in the first way you add a class for this last scenario and you flip it with matrix.
#slide3:checked ~ #controls label:nth-child(2) {
transform: matrix(-1,0,0,1,0,0);}
Third way
For me maybe the best way. You can use :before and content:"" to a letter, icon or symbol to a label. So labels are empty and you "fill" them with before.
Browser Support
For the first two ways you need to use prefixes.
IE > 9 (IE 9 requires prefix)
Firefox > 3 ( FF < 15 requires prefix)
Chrome (Chrome < 35 requires prefix)
Safari (requires prefix)
Opera > 10 (Opera < 22 requires prefix)
For more info Can I use