CSS - Flip Image
-
- Posts: 10
- Joined: April 14th, 2006, 10:14 pm
CSS - Flip Image
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.
- dickvl
- Posts: 54164
- Joined: July 18th, 2005, 3:25 am
You can do it with SVG:
http://forums.mozillazine.org/viewtopic ... 61#2040861
http://dev.opera.com/articles/view/svg- ... sv/?page=3You can see an example here: http://dev.opera.com/articles/view/svg- ... lery.xhtml
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)".
-
- Posts: 10
- Joined: April 14th, 2006, 10:14 pm