MozillaZine

CSS - Flip Image

User Help for Mozilla Firefox
shaz_a_boo
 
Posts: 10
Joined: April 14th, 2006, 10:14 pm

Post Posted January 21st, 2007, 4:11 pm

Just wondering if there was a recognisable CSS code that would flip the image either vertically or horizontally? If there is can you kindly please tell me, thanks for reading.

Guest
Guest
 

Post Posted January 21st, 2007, 5:16 pm

No

dickvl

User avatar
 
Posts: 51460
Joined: July 18th, 2005, 3:25 am

Post Posted January 21st, 2007, 7:20 pm

You can do it with SVG:
http://forums.mozillazine.org/viewtopic ... 61#2040861

http://dev.opera.com/articles/view/svg- ... sv/?page=3
Code: Select all
For flipping the image, our functions will simply keep track of a global JavaScript variable, toggle it from 1 to -1 and then set the transform attribute with an appropriate value of scale():


            <script><![CDATA[
                // Global variables
                var gnFlippedHoriz = 1;
                var gnFlippedVert = 1;
                function flipImage() {
                    var scaleStr = "translate(256,192) scale(";
                    scaleStr += gnFlippedHoriz;
                    scaleStr += ",";
                    scaleStr += gnFlippedVert;
                    scaleStr += ") translate(-256,-192)";
                    var img = document.getElementById("thePreviewImage");
                    if(img) { img.setAttributeNS(null, "transform", scaleStr); }
                }
                function flipHoriz() {
                    gnFlippedHoriz *= -1;
                    flipImage();
                }
                function flipVert() {
                    gnFlippedVert *= -1;
                    flipImage();
                }
            ]]></script>
   

Look at what the flipImage() function does: A horizontal flip is accomplished by scale(-1,1), while a vertical flip is scale(1,-1). Since all transformations take place with respect to the origin (0,0) of the coordinate system, we need to first move the image so that its center point is at the origin (translate(-256,-192)), then scale the image, then move the image back so that its top-left point is at the origin (translate(256,192)). To flip the image horizontally (but not vertically), the transform attribute value should be "translate(256,192) scale(-1,1) translate(256,-192)".
You can see an example here: http://dev.opera.com/articles/view/svg- ... lery.xhtml

shaz_a_boo
 
Posts: 10
Joined: April 14th, 2006, 10:14 pm

Post Posted January 21st, 2007, 10:11 pm

Hey thank you for your help dickvl

Cheers

dickvl

User avatar
 
Posts: 51460
Joined: July 18th, 2005, 3:25 am

Post Posted January 21st, 2007, 10:37 pm

You're welcome.

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 16 guests