{"id":33178,"date":"2017-09-26T03:01:31","date_gmt":"2017-09-25T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=33178"},"modified":"2024-09-08T16:58:34","modified_gmt":"2024-09-08T06:58:34","slug":"css-3d-transformation-matrix-making-of-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-making-of-tutorial\/","title":{"rendered":"CSS 3D Transformation Matrix Making Of Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS 3D Transformation Matrix Making Of Tutorial<\/p><\/div>\n

It was “line ball” as to whether the “making of” our CSS 3D Transformation Matrix Primer Tutorial<\/a> some time back was harder than the programming involved in its “cut to the chase” web application’s code. This, we find, embarrassing, though we find CSS styling a lot harder than Javascript DOM as far as the client side of web applications “production” goes.<\/p>\n

The thing about that tutorial’s …<\/p>\n

\n
“Nala! Put down that
matrix3d(0.7751,1.854,0,0,
0,1.3861,0,0, 0,0,1,0,
-0.0004308,0.003552,0,1)
‘deformed’ soft toy, we think
you’ll find belongs to Luna …
Naaaalllllaaaa!”<\/i><\/b><\/p>\n
Nala! Put down that matrix3d(0.775105,1.85444,0,0, 0,1.386120,0,0, 0,0,1,0,
-0.000430821,0.00355248,0,1)
“deformed” soft toy, that
we think you’ll find belongs to Luna … Naaaalllllaaaa!<\/i>\n<\/div>\n<\/div>\n
… and don’t think that’s going to cut the mustard at the next World Symposium of Transformation Matresses<\/strike>ices 2017 … “The Future Is Ahead of Onesies<\/font>“.<\/div>\n<\/blockquote>\n

 <\/p>\n

… “making of” picture (we are going to refer to as “production” in blurb below) is that it took a long while to get it looking this way, as basically the blockquote<\/i> element we wanted it to end up as, so that a little of a blockquote<\/i>‘s shadowing could be hinted at with this work. But let’s show you its HTML (with inline CSS) innards and explain more …<\/p>\n

<blockquote<\/i> onclick=”window.open(‘http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php’,’_blank’);”<\/b> style=’cursor:pointer;<\/font>background-color:transparent;<\/font>‘><div style=”vertical-align:top;<\/font>color:red;width:100%;text-align:right;<\/font> background: -webkit-linear-gradient(#BBB, white) bottom repeat; background: linear-gradient(#BBB, white) bottom repeat;<\/font> “><b><i>”Nala! Put down that<br> matrix3d(0.7751,1.854,0,0,<br> 0,1.3861,0,0, 0,0,1,0,<br> -0.0004308,0.003552,0,1)<br> ‘deformed’ soft toy, we think<br> you’ll find belongs to Luna … <br>Naaaalllllaaaa!”<\/i><\/b><\/font><div style=”margin-top:-165px;margin-right:290px;<\/font>text-align:right;height:195px;<\/font>color:transparent;<\/font>background:URL(‘http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoBooth_flickr.jpg’);<\/font>background-position:-140px -400px;<\/font>background-repeat:no-repeat; -webkit-filter: brightness(220%);filter: brightness(220%);<\/font>“><i>Nala! Put down that matrix3d(0.775105,1.85444,0,0, 0,1.386120,0,0, 0,0,1,0,<br> -0.000430821,0.00355248,0,1)<br> “deformed” soft toy, that<br> we think you’ll find belongs to Luna … Naaaalllllaaaa!<\/i><\/font>
\n<\/div><\/div><div style=”margin-top:30px;<\/font>“> … and don’t think that’s going to cut the mustard at the next World Symposium of Transformation Matr<strike>esses<\/strike>ices 2017 … “The Future Is Ahead of One<font size=1>sies<\/font>”.<\/font><\/div><\/blockquote><br><br><\/font>
\n
\n<p> <\/p><\/font><\/p>\n