5202

ein Blog über technische Fragen zu Blogger

Skizzenbuch: Cool Ratzinger "Schematisch"

von
Ich habe für die Skizze 'Cool Ratzinger' eine schematische Ansicht gebaut, wo ihr sehen könnt, wie 'einfach' das eigentlich gemacht ist. Im Grunde besteht der ganze Trick aus drei übereinander liegenden und verschobenen Layern, die um eine gemeinsame Drehachse bewegt werden.

Demo1: Drei Layer sichtbar

In Demo1 seht ihr die drei Layer und könnt das 'einklappen' verfolgen.

Demo2: Layer 'orange' sichtbar, Layer 'blau' und 'grün' verborgen

In der Demo2 ist der blaue und grüne Layer zuerst innerhalb und außerhalb des 'grauen' Containers verborgen, innerhalb des 'orangen' Containers dagegen sichtbar. Bei der Demo1 habe ich etwas 'gemogelt' und den Winkel vom 'grünen' Container ein kleines Stück gedreht, damit er unter dem 'blauen' Container zu sehen ist. Hier in der Demo2 ist der Winkel jetzt richtig, er entspricht genau dem Winkel von 'Cool Ratzinger'.

Die Drehbewegung wird durch einen Hover, d.h. durch drüberfahren mit der Maus ausgelöst. Der Hover macht den grünen und blauen Container sichtbar, aber  nur innerhalb des grauen Containers. Der 'graue' Rand gehört übrigens nicht zum Container, sondern ist border.

Außerdem könnt ihr sehen, wozu es bei Drehbewegungen Antilaising braucht :=). In Flash würde es besser ausschauen, ganz klar. In CSS3 ist der Dreheffekt aber mit wenigen Zeilen CSS zu erreichen.

HTML

Das HTML von der Skizze ist denkbar einfach, fünf <div> Container, that's all. Zur besseren Übersicht habe ich die Farben der einzelnen Layer dazugeschrieben.
<div class="ped">grey
   <div><div>orange</div>
   <div><div>green</div></div>
   <div><div>blue</div></div></div>
</div>

CSS

Sobald ihr irgendetwas mit CSS3 macht, müsst ihr für jeden Browser die so genannten Vendor-Prefixe schreiben, damit der jeweilige Browser die Eigenschaft auch verstehen kann. Auf den ersten Blick wirkt der Code deshalb so umfangreich. Lasst euch dadurch nicht verwirren. Die Idee mit der nth(n) Schreibweise statt id stammt von Stu Nicholls und vereinfacht die Sache enorm [ist aber ungewohnt und deshalb etwas schwieriger zu verstehen].
div.ped {
  width:300px; 
  height:200px; 
  padding: 0 0 20px 0; 
  margin:20px auto; 
  position:relative; 
  overflow:hidden; 
  background:#e8e8e8; 
  border:20px solid #e8e8e8; 
  border-width:20px 20px 0 20px;
}
div.ped > div {
  width:150px; 
  height:200px; 
  position:relative; 
  float:right;
}
div.ped > div > div:nth-of-type(1) {
  width:150px; 
  height:200px; 
  position:absolute; 
  left:0; 
  top:0;  
  background: orange;
}
div.ped > div > div:nth-of-type(2),
div.ped > div > div:nth-of-type(2) div{
  -webkit-transform-origin: 0 -450px;
     -moz-transform-origin: 0 -450px;
      -ms-transform-origin: 0 -450px;
       -o-transform-origin: 0 -450px;
          transform-origin: 0 -450px;
  -webkit-transition: 0.75s ease-in-out;
     -moz-transition: 0.75s ease-in-out;
      -ms-transition: 0.75s ease-in-out;
       -o-transition: 0.75s ease-in-out;
          transition: 0.75s ease-in-out;
}
div.ped > div > div:nth-of-type(3),
div.ped > div > div:nth-of-type(3) div {
  -webkit-transform-origin: 150px -450px;
     -moz-transform-origin: 150px -450px;
      -ms-transform-origin: 150px -450px;
       -o-transform-origin: 150px -450px;
          transform-origin: 150px -450px;
  -webkit-transform: rotate(-17deg);
     -moz-transform: rotate(-17deg);
      -ms-transform: rotate(-17deg);
       -o-transform: rotate(-17deg);
          transform: rotate(-17deg);
  -webkit-transition: 0.75s ease-in-out;
     -moz-transition: 0.75s ease-in-out;
      -ms-transition: 0.75s ease-in-out;
       -o-transition: 0.75s ease-in-out;
          transition: 0.75s ease-in-out;
}
div.ped > div > div:nth-of-type(3) div {
  width:149px; 
  height:200px; 
  position:absolute; 
  left:0; 
  top:0; 
  background:blue; 
  border-right:1px solid #888;
  -webkit-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
          box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
} 
div.ped > div > div:nth-of-type(2) {
  width:150px; 
  height:220px; 
  position:absolute; 
  left:0; 
  top:0; 
  overflow:hidden;
  -webkit-transform: rotate(-17deg);
     -moz-transform: rotate(-17deg);
      -ms-transform: rotate(-17deg);
       -o-transform: rotate(-17deg);
          transform: rotate(-17deg);
} 
div.ped > div > div:nth-of-type(2) div {
  width:150px; 
  height:200px; 
  position:absolute; 
  left:0; 
  top:0; 
  background:green;
  -webkit-transform: rotate(17deg);
     -moz-transform: rotate(17deg);
      -ms-transform: rotate(17deg);
       -o-transform: rotate(17deg);
          transform: rotate(17deg);
}
div.ped > div > div:nth-of-type(3) {
  width:150px; 
  height:220px; 
  position:absolute; 
  left:-150px; 
  top:0; 
  overflow:hidden;
} 
div.ped > div:hover > div:nth-of-type(2),
div.ped > div:hover > div:nth-of-type(3),
div.ped > div:hover > div:nth-of-type(2) div, 
div.ped > div:hover > div:nth-of-type(3) div {
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;

  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
}

Noch Fragen? Anmerkungen? Fehler?

Ich freue mich über eure Kommentare!