CSS - Flip Image

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

CSS - Flip Image

Post by shaz_a_boo »

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 by Guest »

No
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Post by dickvl »

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 by shaz_a_boo »

Hey thank you for your help dickvl

Cheers
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Post by dickvl »

You're welcome.
Post Reply