Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Css3please upgrades #82

merged 7 commits into from

2 participants


Hi @paulirish

A few upgrade for your consideration. Please feel free to merge, cherrypick or discard entirely. I haven't tested in all browsers but for the most part, it's working fine.

Changes include:

1) Added css3 scale.

Tested in Chrome 16, Safari 5.1.2, FF9, IE9.

Note that it's not additive in that if you toggle on .box_rotate and then select .box_scale, it won't be rotated and scaled.

2) Added 3D transforms
Tested in Chrome 16, Safari 5.1.2.
Still needs testing in IE10 and FF10 but it should work.

3) Update to copy. Removed reference to text-shadow coming soon because I see that it is already there.


Nice!! can you put transform style on the right of rotateY like i did with css columns?
also plz add a changelog entry for these changes (and credit yo'self!!)

this is great.


also. you're now a repo collab so you can commit directly. great stuff from you so far. :)


Awesome! I'm in transit today so I'll make the updates in the next few days.


Hi Paul,

Okay made the updates and it should be ready to merge.

I might have a few more additions but as a collab, what are the ground rules for making commits? Should I just commit directly to master or do you want me to branch and still make pull requests so you can review before merging to master?




i'd love if you just committed straight to master. unless your ideas are crazy, it's good to have them in by default. :)

@paulirish paulirish merged commit 9b27ebd into paulirish:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 19, 2012
  1. @uxder
  2. @uxder
  3. @uxder

    Added 3dtransforms.

    uxder authored
Commits on Jan 21, 2012
  1. @uxder

    Changelog Updated!

    gitbase authored uxder committed
  2. @uxder
  3. @uxder

    update change log

    uxder authored
  4. @uxder

    Resolving conflicts

    uxder authored
This page is out of date. Refresh to see the latest.
Showing with 33 additions and 1 deletion.
  1. +33 −1 index.html
34 index.html
@@ -131,6 +131,37 @@
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
+<div id="box_scale" class="rule_wrapper commentedout">
+ <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
+ <pre class="rule">
+.box_scale {
+ -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Saf3.1+, Chrome <span class="endcomment">*/</span></span>
+ -moz-transform: scale(<b g="0">0.8</b>); <span class="comment">/* FF3.5+ <span class="endcomment">*/</span></span>
+ -ms-transform: scale(<b g="0">0.8</b>); <span class="comment">/* IE9 <span class="endcomment">*/</span></span>
+ -o-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Opera 10.5+ <span class="endcomment">*/</span></span>
+ transform: scale(<b g="0">0.8</b>);
+ <span class="ie">filter: <span class="filter">progid:DXImageTransform.Microsoft.Matrix(<span class="comment">/* IE6–IE9 <span class="endcomment">*/</span></span>
+ <b g="0" i="matrix2deg" o="deg2matrix" readonly>M11=0.9999025240093042, M12=-0.013962180339145272, M21=0.013962180339145272, M22=0.9999025240093042</b>,SizingMethod='auto expand')</span>;</span></span>
+ <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
+<div id="box_3dtransforms" class="rule_wrapper commentedout">
+ <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
+ <pre class="rule">
+.box_3dtransforms {
+ -webkit-perspective: <b g="0">300</b>; <span class="comment">/* Saf4+, Chrome 12+ <span class="endcomment">*/</span></span>
+ -moz-perspective: <b g="0">300</b>; <span class="comment">/* FF10+ <span class="endcomment">*/</span></span>
+ -ms-perspective: <b g="0">300</b>; <span class="comment">/* IE10+ <span class="endcomment">*/</span></span>
+ perspective: <b g="0">300</b>;
+ -webkit-transform: rotateY(<b g="1">180</b>deg); -webkit-transform-style: preserve-3d;
+ -moz-transform: rotateY(<b g="1">180</b>deg); -moz-transform-style: preserve-3d;
+ -ms-transform: rotateY(<b g="1">180</b>deg); -ms-transform-style: preserve-3d;
+ transform: rotateY(<b g="1">180</b>deg); transform-style: preserve-3d;
+ <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
<div id="box_transition" class="rule_wrapper ">
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
@@ -283,7 +314,7 @@
btw- up/down keys work, along with your mouse wheel. ;)
- coming soon.. extra css transforms (skew, scale), text-shadow and more.
+ coming soon.. extra css transforms (skew, scale) and more.
<a href="">plz leave feedback here</a>.
also css3please is an open source project!. <a href="">report bugs or contribute!</a>
@@ -309,6 +340,7 @@
+ 2012.01.21: Added transform scale and 3d transforms.(thx <a href="">uxder</a>)
2012.01.19: Linear Gradient Syntax <a href="">Updated</a>. (thx <a href="">cssdeck</a> and <a href="">uxder</a>!)
2012.01.14: Added <code>tab-size</code>. (Blame <a href="">Mathias</a> if anything breaks!)
2011.10.23: Added the sweet matrix manip demo from <a href="">Peter Nederlof</a>. Thx Peter!
Something went wrong with that request. Please try again.