Trucos y efectos de CSS3 432z Tutoriales En Linea

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Trucos y efectos de CSS3 - Tutoriales En Linea</title>
</head>
<body>

}

.pinStarLeaf{
        width: 60px;
        height: 120px;
        position: absolute;
        border-radius: 50%/30% 30% 70% 70% ;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        opacity: .5;

}

.pinStarLeaf:nth-of-type(1){
      background-color: #B8F0F5;

}

.pinStarLeaf:nth-of-type(2){
      background-color: #9CF3DC;

}

.pinStarLeaf:nth-of-type(3){
      background-color: #94F3B0;

}

.pinStarLeaf:nth-of-type(4){
      background-color: #D2F8A1;

}

.pinStarLeaf:nth-of-type(5){
      background-color: #F3EDA2;

}
#pinStarCenter, #pinStarCenterChkBox{
        width: 45px;
        height: 50px;
        position: absolute;
        left: 0;
        right: 0;
        top: -60px;
        bottom: 0;
        margin: auto;
        background-color: #fff;
        border-radius: 50%;
        cursor: pointer;

}

#pinStarCenter, .pinStarLeaf{
      pointer-events: none;

}
    #pinStarCenter > input[type="checkbox"]{
        width: 100%;
        height: 100%;
        cursor: pointer;

}
#pinStarCenterChkBox:checked ~ .pinStarLeaf{
        transition: transform 1s linear;

}
    #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(5){
        transform: rotatez(35deg);

}
    #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(4){
       transform: rotatez(105deg);

}

#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(3){
        transform: rotatez(180deg);

}

#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(2){
        transform: rotatez(255deg);

}

#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(1){
        transform: rotatez(325deg);

}
.pinStarLeaf{
        transform-origin: 30px 30px;
        transition: transform 1s linear;
}
cubic-bezier (t1, d1, t2, d2)
/* t1 = 0 , d1 = 1, t2 = 0, d2 = 0 */
cubic-bezier(0,1,0,0)
/* t1 = 1 , d1 = 0, t2 = 0, d2 = 0 */
cubic-bezier(1,0,0,0)
/* t1 = 1 , d1 = 1, t2 = 0, d2 = 1 */
cubic-bezier(1,1,0,1)
/* t1 = 1 , d1 = 1, t2 = 1, d2 = 0 */
cubic-bezier(1,1,1,0)
#pinStarCenterChkBox:checked ~ .pinStarLeaf{
transition: transform 1s cubic-bezier(.8,-.5,.2,1.4);}
</style>

<div id="pinStarWrapper">
      <input type="checkbox" id="pinStarCenterChkBox">
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div id="pinStarCenter">Hacer clic</div>
</div>

</body>
</html>