Skip to content
Browse files

matrix tool added. sweet.

  • Loading branch information...
1 parent c259332 commit 9425743eb776ff3e35e981e1634a3b1c933eaf97 @paulirish committed Oct 23, 2011
Showing with 76 additions and 4 deletions.
  1. +1 −1 css/light.css
  2. +38 −3 css/stylesheet.css
  3. +37 −0 index.html
View
2 css/light.css
@@ -1,4 +1,4 @@
-body {
+body, #box_matrix {
background-color: #eeeeee;
background-image: -moz-linear-gradient(top, #eeeeee, #ffffff);
background-image: -ms-linear-gradient(top, #eeeeee, #ffffff);
View
41 css/stylesheet.css
@@ -10,6 +10,7 @@
html {
overflow-y: scroll;
+ background:none;
}
article,
@@ -27,6 +28,7 @@ a {
cursor: pointer;
outline: none;
}
+a:link { color: #aaa;}
q:before,
q:after {
@@ -238,7 +240,7 @@ dfn {
body {
background-color: #0c1021; /*was url(../img/texture.jpg)*/
- color: #f8f8f8;
+
}
#sandboxwrap {
@@ -275,7 +277,8 @@ body {
#sandbox p{
font-size: 30px;
line-height: 50px;
- margin: 0
+ margin: 0;
+ width: auto;
}
.rule,
@@ -287,6 +290,7 @@ body {
z-index: 1;
display: inline
}
+.bracket { color: #f8f8f8; }
.rule .comment {
color: #0088ff;
@@ -399,4 +403,35 @@ body {
/* @mathias */
.cb { display: none; }
-.flash .cb { display: inline; }
+.flash .cb { display: inline; }
+
+
+/* overruling the new matrix stuff. */
+
+
+#matrixbox { position:relative; top: 160px;}
+#output { position: static; background: initial; border: 0;
+ text-align: inherit;
+ font-family: inherit;
+}
+#box_matrix {
+position: relative;
+z-index: 10;
+background: #0c1021;
+min-height: 270px;
+margin-right: -10px;
+}
+
+
+
+#play, #save {
+height: 160px;
+width: 160px;
+padding: 50px;
+text-align: center;
+right: 12%;
+z-index: 20;
+left: auto;
+}
+#save { color: white;
+border-color: white; }
View
37 index.html
@@ -3,6 +3,9 @@
<head>
<meta charset="UTF-8">
<title>CSS3 Please! The Cross-Browser CSS3 Rule Generator</title>
+
+ <link rel="stylesheet" href="http://peterned.home.xs4all.nl/matrices/matrices.css">
+
<link rel="stylesheet" href="css/stylesheet.css" media="screen">
<script>if (((navigator.plugins && typeof navigator.plugins['Shockwave Flash'] == 'object') || (window.ActiveXObject && (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')))) && location.protocol != 'file:') document.documentElement.className = 'flash';</script>
@@ -221,6 +224,39 @@
+<script defer src="http://peterned.home.xs4all.nl/matrices/matrices.js"></script>
+
+<div id="box_matrix" 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>
+
+<div id="matrixbox">
+<span id="save">
+ Oh hai :)
+ <br><br>
+ From <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>
+ <a href="#1,0,0,1,0,0" class="reset">oh noes!</a>
+</span>
+<span id="play">
+ Manipulate me, please!
+ <span class="rotate">rotate</span>
+ <span class="scale">scale</span>
+ <span class="skewx">skew</span>
+ <span class="skewy">skew</span>
+
+ <span class="move">move</span>
+ </span>
+</div>
+
+ <pre class="rule">
+.matrix {
+ <div class="comment"><div id="output" class="declaration" style="min-height: 100px">Play for output ...</div></div>
+}</pre>
+
+
+</div>
+
+
+
<pre class="rule footer"><span class="comment">
@@ -252,6 +288,7 @@
/*
__Changelog__
+ 2011.10.23: Added the sweet matrix manip demo from <a href="http://peterned.home.xs4all.nl/matrices/">Peter Nederlof</a>. Thx Peter!
2011.10.18: <a href="http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/">CSS Animations</a> added. (thx <a href="//twitter.com/wookiehangover">wookiehangover</a>!)
2011.07.27: Added multicolumn. (thx <a href="https://twitter.com/hotmeteor" target="_blank">hotmeteor</a>!)
2011.04.12: Added gradient for IE10! (thx <a href="https://github.com/Calvein" target="_blank">calvein</a>!)

4 comments on commit 9425743

@seutje
seutje commented on 9425743 Oct 24, 2011

oh sweet, hadn't seen that demo before... kind of awkward when u move after rotating though

@paulirish
Owner

awk how?

@seutje
seutje commented on 9425743 Oct 24, 2011

when I rotate it 90° to the left and drag the "move" thing to the left, it goes up (or to its right)
ideally it should just follow the mouse, like it does when it isn't rotated, no?

@paulirish
Owner

@peterned ... ^

Please sign in to comment.
Something went wrong with that request. Please try again.