Flip

Hva

I denne modulen skal vi se litt på hvordan vi kan vende, "flippe", et element. Vi vil ha framstillingen i en slags 3D-illusjon, og bruker CSS-egenskapen perspective.

perspective

CSS3 gir oss en mulighet for å lage en slags 3d-effekt. Nøkkelen til dette er CSS-egenskapen perspective. Effekten er begrenset og ganske enkel. Dersom vi skal lage en romlig kostruksjon som en bks er dette mulig, men det er ganske komplisert. Det som imidlertid er enkelt er å gi en 3D-effekt når vi roterer elementer. Vi kan lage "flip"-effekter, f.eks. som når vi blar i en bok.

La oss anta at vi ønsker å plassere et bilde vertikalt sentrert inne i et element. Bildet er mindre enn det omgivende elementet.

Dersom vi ikke bruker perspective og lager en 45 graders rotasjon får vi følgende

Hei

her er det litt text

#scene0{
    border-style:solid;border-width:thin;
    width:200px;
    margin:20px;
    padding:10px;
    background-color:#EEE;
}
#content0{
    border-style:solid;border-width:2px;border-color:red;
    padding:5px;
    background-color:yellow;
    transform:rotateX(45deg)
}

Dersom vi legger til et perspektiv på en omgivende boksen får vi dette.

Hei

her er det litt text

#scene1{
    border-style:solid;border-width:thin;
    width:200px;
    margin:20px;
    padding:10px;
    background-color:#EEE;
    perspective:200px;
    -webkit-perspective:200px
}
#content1{
    border-style:solid;border-width:2px;border-color:red;
    padding:5px;
    background-color:yellow;
    transform:rotateX(45deg)
}

Hva betyr egentlig perspective-verdien ? Det beste vi kan si om dette er vel at verdien angir avstanden fra XY-planet, altså egentlig hvor lang unna websiden du er. Prøv deg fram. Verdien skal angis i px.

Dersom vi endrer perspective til 1000x blir det slik:

Hei

her er det litt text

Flip animasjon

Vi forsøker oss med en animasjon. Før musa over elementet

Hei

her er det litt text

#scene3{
    border-style:solid;border-width:thin;
    width:200px;
    margin:20px;
    padding:10px;
    background-color:#EEE;
    perspective:1000px;
    -webkit-perspective:400px
}
#content3{
    border-style:solid;border-width:2px;border-color:red;
    padding:5px;
    background-color:yellow;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
#scene3:hover #content3 {
  transform: rotateY(180deg);
}

Vi ser at vi får som vi måtte forvente at teksten er speilet etter rotasjonen. Kan vi endre forside og bakside ? Vi forsøker oss med to innholds elementer inne i elementer inne i boksen (scene). Du kan inspisere elementet fra nettlesermenyen.

Hei

her er det litt text

Hallo

her er det en annen text

#scene4{
    position: relative;
    z-index:1;
    
    border-style:solid;border-width:thin;
    width:200px;
    height:100px;
    margin:20px;
    padding:10px;
    background-color:#EEE;
    
    perspective:1000px;
    -webkit-perspective:400px
}
#content4{
    border-style:solid;border-width:2px;border-color:red;
    width: 100%;
    height: 90%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
#content4 .face{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    background-color:yellow;
    width: 100%;
    height: 90%;
    }
#content4 .face.backside{
    transform: rotateY(180deg);
    background-color: yellow;
}
#scene4:hover #content4 {
  transform: rotateY(180deg);
}

Vi vil rotere om den høyre kanten

Det eneste vi gjør er å legge til transform-origin: 100% 100%;

Hei

her er det litt text

Hallo

her er det en annen text

#scene5{
    position: relative;
    z-index:1;
    
    border-style:solid;border-width:thin;
    width:200px;
    height:100px;
    margin:20px;
    padding:10px;
    background-color:#EEE;
    
    perspective:1000px;
    -webkit-perspective:400px
}
#content5{
    border-style:solid;border-width:2px;border-color:red;
    width: 100%;
    height: 90%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
    transform-origin: 100% 100%;
    -ms-transform-origin:transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
}
#content5 .face{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    background-color:yellow;
    width: 100%;
    height: 90%;
    }
#content5 .face.backside{
    transform: rotateY(180deg);
    background-color: yellow;
}
#scene5:hover #content5 {
  transform: rotateY(180deg);
}

Det gjenstår som du ser en del før vi har en ferdig bok med flere sider. Ideen er tatt et skritt videre i modulen Bok .