Trice esame

by beatricevivaldi

HTML

<div class="cards">
    <a id="card1"></a>
    <div class="card" style="background: red">
        <div id="card1-1">card1-1</div>
        <div id="card1-2">card1-2</div>
    
    </div>
    <a id="card2"></a>
    <div class="card" style="background: green">card2</div>
    <a id="card3"></a>
    <div class="card" style="background: blue">card3</div>
</div>
<a href="#card1">go to card 1</a>
<a href="#card2">go to card 2</a>
<a href="#card3">go to card 3</a>

CSS

.cards{
    position: relative;
    height: 300px;
    overflow: hidden;
    border: 1px solid #666666;
}
.card{
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    transition: transform 0.5s;
}
a:target + .card{
    z-index: 3;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
a:target + .card ~ .card{
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);    
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

#card1-1 {
    width:50%;
    float: left;
}

#card1-2 {
    width:50%;
    float: left;
}
}

JavaScript

window.location.hash = 'card1';