@

css3only - How to replace hover state
through a CSS-trick like onClickEvent()
without javascript

Tutorial

Hi my friends! At first let's take a look at the following boxes. Nowadays not all browsers did support this feature. But in the future they will be able.

Once in a while i stumbled over the 'CSS3 Flip 3D Animation' from Adam Khoury and thought to myself how useful it could be to get a lot of content without losing the beautiful webdesign with a clickoption but without javascript. So I searched for some tricks to get it done. It did not took a long time and I found the 'CSS Click Events' from Hugo Giraudel.
And so I put this both technics together and get this solution. The trick is to use a checkbox and its use his property "checked or not checked". So lets start! 

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css">
/* put the css-code here */
</style> 
</head> 
<body>
<!-- put the html-code here -->  
</body>
</html>
:htmlcode HTML skeletal structure ( for beginners only )
  1. At first we want to do it only for one filp3dbox:
    write this into your headers style area
    '<style type="text/css"> </style>' or into your external cascading stylesheet document *.css
    2. input[type=checkbox]{
  display: none;
  width: 0px;
  height: 0px;
  visibility: hidden;
  /* because we dont want to show the checkbox */
}
    :csscode 
    <form>
  <input type="checkbox" id="toggle">
  <label class="to-be-changed" for="toggle">
    <div class="frontside">Click me! Frontside </div>
    <div class="backside">Click me! Backside </div>
  </label>
</form>
    :htmlcode
  2. Then we need some transition-action for the 3Dflip.
    Of course you need the other browser prefixes to get it work in other browsers.
    css3 browser supportlist
    3. input[type=checkbox]:checked ~ .to-be-changed .frontside {
  transform: perspective( 600px ) rotateY( 180deg );
  transition: transform .5s linear 0s;   
}
input[type=checkbox]:checked ~ .to-be-changed .backside {
  transform: perspective( 600px ) rotateY( 0deg );
  transition: transform .5s linear 0s;   
}
.to-be-changed {
  width:260px;
  height:200px;
  border-radius: 7px;
  left:-20px; top:-20px; 
}
    :csscode
  3. How to style the div-box?
    4. .frontside{ 
    position:absolute;   
    margin: 0px;
    padding: 5px;
    border-radius: 7px;
    width:250px;
    height:190px;
    background-color: #aaa;
    backface-visibility:hidden;
    transform: perspective( 600px ) rotateY( 0deg );
    transition: transform .5s linear 0s;
}
.backside{
    position: absolute;
    margin: 0px;
    padding: 5px;
    border-radius: 7px;
    width:250px;
    height:190px;
    background-color: #777;
    transform: perspective( 600px ) rotateY( -180deg );
    transition: transform .5s linear 0s;
    backface-visibility:hidden;  
}
    :csscode
    :example At this time it should look like this.
  4. Prepare for the next step to multiply the flip3D-boxes.
    5. form{
  width:260px; 
  height:200px; 
  float:left; 
  margin:5px;
}
label[for='toggle']{
  position: relative;
  display: block;
  width:260px;
  height:200px;
  margin:20px;
  color: white;
  font-weight: bold;
  cursor: pointer;    
}
    :csscode
  5. For every new flip3D-box we have to create some html and some css-codes.
    At first some html code lines, we have only to copy the Formpart with all his content and past it under the original.
    The changes I did normally in a nummeric were from name to name1...to namen.
    6. <form>
<input name="cb1" type="checkbox" id="toggle1">
<label id="lab1" class="to-be-changed" for="toggle1">
<div class="frontside">Click me! Frontside 1</div>
<div class="backside"><span>Click me! Backside 1</span></div>
</label>
</form>
<!-- . . . and so on . . . -->
<form>
<input name="cbn" type="checkbox" id="togglen">
<label id="labn" class="to-be-changed" for="togglen">
<div class="frontside">Click me! Frontside n</div>
<div class="backside"><span>Click me! Backside n</span></div>
</label>
</form>
    :htmlcode

     Now let's change the existing css a little bit to get the new flip3D-box working.
    Now we need a new switch for the checkbox functionality.
    At this time we have two boxes toggle1 and toggle2.
    The properties are the same, so we have only to do it like the following.
    There is a simple change at the first line in this code block.     
    label[for='toggle1'], label[for='toggle2']{
    position: relative;
    display: block;
    width:260px;
    height:200px;
    margin:20px;
    color: white;
    font-weight: bold;
    cursor: pointer;    
}
    :csscode

     Not a must but a nice to have.
    If you want some different look at your boxes you get it done with the #id's.
    Here in my example it is the different background-color and some text aligns. 
    #lab1 .frontside {background-color: #e58e00;}
#lab1 .backside {
background-color: #c47900; 
text-align: right; vertical-align:text-bottom;
} 
#lab2 .frontside {background-color: #fc7b00;}
#lab2 .backside {
background-color: #db6a00; 
text-align: right; vertical-align:text-bottom;
}
    :csscode