I was messing with css matrices

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • kazymjir
    Confirmed User
    • Oct 2011
    • 411
    #1

    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/
    Tags: css, matrix, porn mathematics
    • Zoxxa
      Confirmed User
      • Feb 2011
      • 1026
      #2
      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!

        Comment

        • bns666
          Confirmed Fetishist
          • Mar 2005
          • 11554
          #3
          looks great
          ⭐ CAM SODA ⭐ STRIPCHAT ⭐
          ⭐ CHATURBATE ⭐ X LOVE CAM ⭐

            Comment

            • PornMD
              Mainstream Businessman
              • Jan 2007
              • 9291
              #4
              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.

                Comment

                • kazymjir
                  Confirmed User
                  • Oct 2011
                  • 411
                  #5
                  Thanks Zoxxa, bns666, PornMD!

                  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.
                  http://kazymjir.com/

                    Comment

                    • PornMD
                      Mainstream Businessman
                      • Jan 2007
                      • 9291
                      #6
                      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.
                      Want to crush it in mainstream with Facebook ads? Hit me up.

                        Comment

                        • k0nr4d
                          Confirmed User
                          • Aug 2006
                          • 9231
                          #7
                          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

                            Comment

                            • - Jesus Christ -
                              Confirmed User
                              • Mar 2003
                              • 7197
                              #8
                              This has some great implications for SEO work.

                              Very cool.

                              Amen

                                Comment

                                • papill0n
                                  Unregistered Abuser
                                  • Oct 2007
                                  • 15547
                                  #9
                                  yeah had never heard of matrices before

                                  something to look into

                                  thanks

                                  oh and yeah nice work

                                    Comment

                                    • Voodoo
                                      ♥ ♦ ♣ ♠
                                      • Sep 2002
                                      • 10600
                                      #10
                                      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

                                      "I'm selflessly supporting the common good, but only coincidentally looking out for No.1."

                                        Comment

                                        • kazymjir
                                          Confirmed User
                                          • Oct 2011
                                          • 411
                                          #11
                                          Thanks!

                                          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.

                                          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
                                          http://kazymjir.com/

                                            Comment

                                            • The Dawg
                                              Confirmed User
                                              • Apr 2002
                                              • 2438
                                              #12
                                              Very nice.

                                                Comment

                                                • DWB
                                                  Registered User
                                                  • Jul 2003
                                                  • 31779
                                                  #13
                                                  Very, very cool.

                                                    Comment

                                                    Previous template Next
                                                    Working...