JSFiddle - React, Tailwind, and code Playground

by AshMokhberi

HTML

<div class="ex">
    Problems are :
    <ul>
        <li>When first sticky flips, fonts looks ugly</li>
        <li>
            When clicking enabled sticky, while the animation runs, fonts looks ugly.
            On the real page, other elements are affected.
        </li>
    </ul>
</div>

<div id="zone">
    <div class="postit-container flip">
        <div class="postit">flipper</div>
    </div>
    <div class="postit-container">
        <div class="postit">one</div>
    </div>
    <div class="postit-container">
        <div class="postit">two</div>
    </div>
    <div class="postit-container">
        <div class="postit">three</div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Indie+Flower&v2);
 * {
-webkit-transform-style: preserve-3d;
}
.ex {
 margin:0 0 20px 0;   
}

.postit-container {
  width: 90px;
  height: 80px;
  margin: 6px 6px 10px 6px;
  float: left;
  position: relative;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
  -webkit-transition: -webkit-transform 0.15s ease-in-out;
  -moz-transition: -moz-transform 0.15s ease-in-out;
  -o-transition: -o-transform 0.15s ease-in-out;
  -ms-transition: -ms-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
}

.postit-container .postit {
  width: 100%;
  height: 90%;
  padding-top: 10%;
  position: absolute;
  z-index: 10;
  background-color: #fff48c;
  border-color: #DEE184;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  -o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  color: #3e3d40;
  text-align: center;
  font-size: 13px;
  font-family: 'Indie Flower', 'arial', 'serif';
  word-wrap: break-word;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -ms-transition: -ms-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  -webkit-transform: translatez(0);
  -webkit-transform: rotatez(0);
  -webkit-transform-style: preserve- 3 d;
}
.postit-container .postit:hover {
  cursor: pointer;
}

.postit-container:nth-child(3n) {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.postit-container:nth-child(5n) {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
 ...

JavaScript

window.addEvent('domready', function() {
    $('zone').getElements('.postit-container').each(function(e){
        e.addEvent('click', function() {
            this.toggleClass('enabled');
        });
    });
});