- /* all slides */
- article {
transform: translate(100%, 0) scale(0.1) rotate(180deg);
}
- /* current */
- article:target {
transform: translate(0, 0) scale(1) rotate(0deg);
}
- /* next */
- article:target + a + .slide {
transform: translate(45%, -50%) scale(0.2) rotate(-90deg);
}
- /* Make all links look like back buttons */
- article ~ a::after {
content: '<< back';
position:absolute;
transform: translatez(0);
}
- /* Hide link for current and future slide */
- article:target ~ a::after,
#slides > a span,
article:target ~ a {
display: none;
}
- /* Just the link for the slide after the current one */
- article:target + a + article + a {
position:absolute; bottom: 20px; right: 20px;
display: block;
position: absolute;
}
- /* And the generated content on that link */
- article:target + a + article+ a::after {
content: 'next >>';
display: block;
}
- /* basic styles */
- article {
position: absolute;
overflow: hidden;
width: 100vw;
height: 100vh;
top: 0; left: 0;
transition: all 0.25s ease-in;
background-color: #333;
}
- article ~ a::after {
position:absolute;
bottom: 20px;
left: 20px;
background-color: #333;
}