CssFlipper

How to use?!

<?php
 require_once '/path/to/CssFlipper.php';
 $css = "Some Code...";
 $flipped_code = CssFlipper::flipCss($css);
?>

Flip what??

Properites:

Values:

.some-element {
 /* x, y */
 background-position: left top; /* <-> */ background-position: right top;
 background-position: 10% 10%; /* <-> */ background-position: 90% 10%;
 background-position: -10% -10%; /* <-> */ background-position: 110% -10%;
 background-position: 10px 20px; /* not supported yet! */
 /* same as "background-position" */
 background-position-x: left; /* <-> */ background-position-x: right;
 transform-origin: left top; /* <-> */ transform-origin: right top;
 perspective-origin: left top; /* <-> */ perspective-origin: right top;
 /* not supported! */
 background: url(bla_bla_bla) no-repeat left top / cover;
 /* (top-left and bottom-right), (top-right and bottom-left) */
 border-radius: 1px 2px; /* <-> */ border-radius: 2px 1px;
 /* (top-left), (top-right and bottom-left), (bottom-right) */
 border-radius: 1px 2px 3px; /* <-> */ border-radius: 2px 1px 2px 3px;
 /* (top-left), (top-right), (bottom-right), (bottom-left) */
 border-radius: 1px 2px 3px 4px; /* <-> */ border-radius: 2px 1px 4px 3px;
 /* top, right, bottom, left */
 border-color: #111 #222 #333 #444; /* <-> */ border-color: #111 #444 #333 #222;
 border-style: solid dotted double dashed; /* <-> */ border-style: solid dashed double dotted;
 border-width: 1px 2px 3px 4px; /* <-> */border-width: 1px 4px 3px 2px;
 margin: 1px 2px 3px 4px; /* <-> */ margin: 1px 4px 3px 2px;
 padding: 1px 2px 3px 4px; /* <-> */ padding: 1px 4px 3px 2px;
 /* x, y, ... */
 box-shadow: 1px 2px 3px #000; /* <-> */ box-shadow: -1px 2px 3px #000;
 clear: left; /* <-> */ clear: right;
 float: left; /* <-> */ float: right;
 text-align: left; /* <-> */ text-align: right;
 direction: ltr; /* <-> */ direction: rtl;
 transition: left 0.3s; /* <-> */ transition: right 0.3s;
 transition-property: left; /* <-> */ transition-property: right;
 /* transform : discribed below... */
}

Transform:

.some-element {
 /* x */
 transform: translateX(50px); /* <-> */ transform: translateX(-50px);
 /* x, y */
 transform: translate(20px, 60px); /* <-> */ transform: translate(-20px, 60px);
 /* x, y, z */
 transform: translate3d(20px, 60px, 45px); /* <-> */ transform: translate3d(-20px, 60px, 45px);
 /*x-angle, y-angle*/
 transform: skew(10deg, -30deg); /* <-> */ transform: skew(-10deg, 30deg);
 /* angle*/
 transform: skewX(-40deg); /* <-> */ transform: skewX(40deg);
 transform: skewY(85deg); /* <-> */ transform: skewY(-85deg);
 /* angle */
 transform: rotate(37deg); /* <-> */ transform: rotate(-37deg);
 transform: rotateX(52deg); /* <-> */ transform: rotateX(-52deg);
 transform: rotateY(-70deg); /* <-> */ transform: rotateY(70deg);
 transform: rotateZ(112deg); /* <-> */ transform: rotateZ(-112deg);
 /* x, y, z, angle */
 transform: rotate3d(0, 1, 0, 54deg); /* <-> */ transform: rotate3d(0, 1, 0, -54deg);
 /* not supported! */
 transform: matrix(...);
 transform: matrix3d(...);
}

To-Do List:

License