cssRules.json

{"base":"\n.default {\n  -webkit-transform: translate(100px, 100px);\n  height: 100px;\n  width: 100px;\n  border-radius: 2px;\n  background-color: black;\n  z-index: 1;\n  -webkit-transition: -webkit-transform 500ms ease,\n      width 2000ms ease;\n}&/*base*/\n.newState {\n  -webkit-transform: translate(200px, 200px);\n  width: 200px;\n}","base flip card":"\n.default {\n  position: absolute;\n  top: 100px;\n  left: 100px;\n  height: 100px;\n  width: 100px;\n  background-color: black;\n  z-index: 1;\n  transition: all 500ms ease-in;\n  color: white;font-size: 46px;\n}&/*base flip card*/\n.newState {\n  transform: rotateY(180deg);\n}","nuovo01":"\n.default {\n  position: absolute;top: 100px;left: 100px;\n  height: 100px;\n  width: 100px;\n  background-color: rgba(0, 0, 0, .8);\n  color: white;\n  font-size: 46px;\n  -webkit-transition: all 500ms ease-in;\n}&/*nuovo01*/\n.newState {\nbackground-color: rgba(100, 200, 100, 1);\n/*   transform: translate(50%, 50%) rotate(0.5turn); */\n/* transform: translate3d(100%, 100%, 3em); */\n/*   transform: rotate3d(0, 0, 0, 90deg) */\n/*   transform: rotateZ(90deg); */\n/*   transform: perspective(17px); */\n transform: translateX(-100px) rotate(90deg) translateY(-100px);\n}","nuovo02":"\n.default {\n  position: absolute;top: 100px;left: 100px;\n  height: 100px;\n  width: 100px;\n  background-color: rgba(0, 0, 0, .8);\n  color: white;\n  font-size: 46px;\n  -webkit-transition: all 500ms ease-in;\n}&/*nuovo02*/\n.newState {\n\tbackground-color: rgba(100, 200, 100, 1);\n\ttransform: rotate(90deg);\n  -webkit-transform-origin: bottom;\n}","nuovo03":"\n.default {\n  position: absolute;\n  top: 100px;\n  left: 100px;\n  height: 100px;\n  width: 100px;\n  background-color: black;\n  z-index: 1;\n  transition: all 500ms ease-in;\n}&/*nuovo03*/\n.newState {\n  transform: translate(100px, 100px);\n}","nuovo04":"\n.default {\n  position: absolute;\n  top: 100px;\n  left: 100px;\n  height: 100px;\n  width: 100px;\n  background-color: black;\n  z-index: 1;\n  transition: all 500ms ease-in;\n}&/*nuovo04*/\n.newState {\n  -webkit-transform-origin: 100px 100px;\n  -webkit-transform: rotate(45deg);\n}","nuovo05":"\n.default {\n  position: absolute;\n  top: 100px;\n  left: 100px;\n  height: 100px;\n  width: 100px;\n  background-color: black;\n  z-index: 1;\n  transition: all 500ms ease-in;\n  color: white;font-size: 46px;\n}&/*nuovo05*/\n.newState {\n  transform: rotateY(50deg);\n}","rhombus":"\n.default {\n\tposition: absolute;\n  top: 15%;\n  left: 15%;\n  height: 7em;\n  width: 7em;\n  background-color: lightblue;\n  transition: all 1000ms ease;\n  font-size: 30px;\n  outline: solid red 1px;\n}&/*rhombus*/\n.newState {\n transform: skewX(60deg) translate(50px, 50px);\n  background-color: darkblue;\n  color: pink;\n  \n}","rotate-as-decrease-width ":"\n.default {\n  position: absolute;\n  top: 100px;\n  left: 100px;\n  height: 100px;\n  width: 100px;\n  background-color: black;\n  z-index: 1;\n  transition: all 500ms ease-in;\n  color: white;font-size: 46px;\n}&/*rotate-as-decrease-width */\n.newState {\n  transform: rotateY(50deg);\n}","skew-button":"\n.default {\n\tposition: absolute;\n  top: 15%;\n  left: 15%;\n  height: 7em;\n  width: 7em;\n  background-color: lightblue;\n  transition: all 1000ms ease;\n  font-size: 30px;\n}&/*skew-button*/\n.newState {\n transform: skewY(6deg);\n  background-color: darkblue;\n  color: pink;\n}","prova":"\n.default {\n  -webkit-transform: translate(100px, 100px);\n  height: 100px;\n  width: 100px;\n  border-radius: 2px;\n  background-color: black;\n  z-index: 1;\n  -webkit-transition: -webkit-transform 500ms ease,\n      width 2000ms ease;\n}&/*prova*/\n.newState {\n  -webkit-transform: translate(200px, 200px);\n  width: 200px;\n}","rhombuspink":"\n.default {\n\tposition: absolute;\n  top: 15%;\n  left: 15%;\n  height: 7em;\n  width: 7em;\n  background-color: pink;\n  transition: all 1000ms ease;\n  font-size: 30px;\n  outline: solid red 1px;\n}&/*rhombuspink*/\n.newState {\n transform: skewX(60deg) translate(50px, 50px) \n   rotate(60deg) scaleY(3);\n  background-color: darkblue;\n  color: pink;\n  \n}"}