I was messing with css matrices - GoFuckYourself.com

kazymjir · 07-11-2012, 06:32 PM

Not so long ago I was testing matrices in CSS to check what kind of effects I can achieve.
Linear algebra and matrix theory is powerful tool in graphical transformations. Unfortunately, not all web browsers can work on 4x4 matrices which can allow full three dimension transformations, only 2x2 matrices are so far supported in most browsers, but it allows only two dimension transformations.

I tried to do some "fake" three dimensional transformation and here is the result:
http://testing.kazymjir-design.com/o...ff/css_matrix/

Nothing great, but it creates illusion that the text is placed on 3D plane.

It works good in last Firefox, other major browsers should run it correctly too (not sure about IE).

Zoxxa · 07-11-2012, 06:56 PM

That is pretty cool nice work, I am using Chrome on Mac and looks great.

bns666 · 07-11-2012, 06:57 PM

looks great

PornMD · 07-11-2012, 07:04 PM

Have Chrome+Windows and looks pretty nice. How much of a pain is it to create that?

kazymjir · 07-11-2012, 07:26 PM

Thanks Zoxxa, bns666, PornMD!

Quote:

Originally Posted by PornMD

How much of a pain is it to create that?

I was unable to use 4x4 matrix, so I decided to use 2x2 matrices and perform 2D transformations (instead of 3D) to achieve this effect.
I opened the background picture in photoshop and took angles on the billboard then I calculated how to skew the text to fit to the borders.
The next step, which took most of the time, was correcting the matrices to make the best illusion of 3D. I opened FireBug and was modifying all matrices manually until I get the proper effect.
It was causing a lot of nerves sometimes, when difference of 0.1 value was making one thing look good and another bad.

PornMD · 07-11-2012, 11:15 PM

Quote:

Originally Posted by kazymjir

Thanks Zoxxa, bns666, PornMD!

I was unable to use 4x4 matrix, so I decided to use 2x2 matrices and perform 2D transformations (instead of 3D) to achieve this effect.
I opened the background picture in photoshop and took angles on the billboard then I calculated how to skew the text to fit to the borders.
The next step, which took most of the time, was correcting the matrices to make the best illusion of 3D. I opened FireBug and was modifying all matrices manually until I get the proper effect.
It was causing a lot of nerves sometimes, when difference of 0.1 value was making one thing look good and another bad.

The flickering light and text shadows are impressive too. I'm excited to see things like this - not needing anything besides CSS/HTML to create awesome effects.

k0nr4d · 07-11-2012, 11:22 PM

Very interesting. These new features in CSS are going to introduce dozens of new ways for internet explorer to piss off web developers! :P

- Jesus Christ - · 07-11-2012, 11:28 PM

This has some great implications for SEO work.

Very cool.

papill0n · 07-11-2012, 11:41 PM

yeah had never heard of matrices before

something to look into

thanks

oh and yeah nice work

Voodoo · 07-12-2012, 12:28 AM

Quote:

Originally Posted by k0nr4d

Very interesting. These new features in CSS are going to introduce dozens of new ways for internet explorer to piss off web developers! :P

kazymjir · 07-12-2012, 03:58 AM

Thanks!

Quote:

Originally Posted by PornMD

The flickering light and text shadows are impressive too. I'm excited to see things like this - not needing anything besides CSS/HTML to create awesome effects.

Nowadays, thanks to jQuery and CSS3, Flash is not so much needed like years before to do some visual effects on websites.

Quote:

Originally Posted by k0nr4d

These new features in CSS are going to introduce dozens of new ways for internet explorer to piss off web developers! :P

lol

The Dawg · 07-12-2012, 05:04 AM

Very nice.

DWB · 07-12-2012, 05:23 AM

Very, very cool.

07-11-2012, 06:32 PM	#1
kazymjir Confirmed User Industry Role: Join Date: Oct 2011 Location: Munich Posts: 411	I was messing with css matrices Not so long ago I was testing matrices in CSS to check what kind of effects I can achieve. Linear algebra and matrix theory is powerful tool in graphical transformations. Unfortunately, not all web browsers can work on 4x4 matrices which can allow full three dimension transformations, only 2x2 matrices are so far supported in most browsers, but it allows only two dimension transformations. I tried to do some "fake" three dimensional transformation and here is the result: http://testing.kazymjir-design.com/o...ff/css_matrix/ Nothing great, but it creates illusion that the text is placed on 3D plane. It works good in last Firefox, other major browsers should run it correctly too (not sure about IE). __________________ http://kazymjir.com/

07-11-2012, 06:56 PM	#2
Zoxxa Confirmed User Industry Role: Join Date: Feb 2011 Location: Ontario, Canada Posts: 1,026	That is pretty cool nice work, I am using Chrome on Mac and looks great. __________________ [email protected] ICQ: 269486444 ZoxEmbedTube - Build unlimited "fake" tubes with this easy 100% unencoded CMS!

07-11-2012, 06:57 PM	#3
bns666 Confirmed Fetishist Industry Role: Join Date: Mar 2005 Location: Fetishland Posts: 11,539	looks great __________________ ⭐ CAM SODA ⭐ STRIPCHAT ⭐ ⭐ CHATURBATE ⭐ X LOVE CAM ⭐

07-11-2012, 07:04 PM	#4
PornMD Mainstream Businessman Industry Role: Join Date: Jan 2007 Location: San Diego Posts: 9,291	Have Chrome+Windows and looks pretty nice. How much of a pain is it to create that? __________________ Want to crush it in mainstream with Facebook ads? Hit me up.

07-11-2012, 11:22 PM	#7
k0nr4d Confirmed User Industry Role: Join Date: Aug 2006 Location: Poland Posts: 9,229	Very interesting. These new features in CSS are going to introduce dozens of new ways for internet explorer to piss off web developers! :P __________________ Mechanical Bunny Media Mechbunny Tube Script \| Mechbunny Webcam Aggregator Script \| Custom Web Development

07-11-2012, 11:28 PM	#8
- Jesus Christ - Confirmed User Industry Role: Join Date: Mar 2003 Location: ::::::::::::: :::::::::::\|\|::::::::::: :::::::::::\|\|::::::::::: :::::::::::\|\|::::::::::: :::::::::::\|\|::::::::::: :::::::::::\|\|::::::::::: ::::::\|\|\|\|\|\|\|\|\|\|\|\|:::::: :::::::::::\|\|::::::::::: :::::::::::\|\|::::::::::: :::::::::::::::::::::::: Posts: 7,197	This has some great implications for SEO work. Very cool. __________________ Amen

07-11-2012, 11:41 PM	#9
papill0n Unregistered Abuser Industry Role: Join Date: Oct 2007 Posts: 15,547	yeah had never heard of matrices before something to look into thanks oh and yeah nice work

07-12-2012, 05:04 AM	#12
The Dawg Confirmed User Join Date: Apr 2002 Location: State Of Bliss Posts: 2,438	Very nice.

07-12-2012, 05:23 AM	#13
DWB Registered User Industry Role: Join Date: Jul 2003 Location: Encrypted. Access denied. Posts: 31,779	Very, very cool.