spudly1987 Posted February 17, 2014 Share Posted February 17, 2014 I want to be able to rotate this like to a 45 degree angle or just be able to rotate any degree, unsure on how to do it <img src="file:///C:/Users/Vincent/Documents/Website/ashtoys.jpg" heigh="300" width="300" /> Link to comment https://forums.phpfreaks.com/topic/286259-rotating-an-image/ Share on other sites More sharing options...
jairathnem Posted February 17, 2014 Share Posted February 17, 2014 <img id="image_canv" src="/image.png" class="rotate90"> .rotate90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } Taken from Google. Link to comment https://forums.phpfreaks.com/topic/286259-rotating-an-image/#findComment-1469256 Share on other sites More sharing options...
spudly1987 Posted February 18, 2014 Author Share Posted February 18, 2014 Thank you for the information, but this will only rotate the image to the right 90deg is there any way to rotate it to the left Link to comment https://forums.phpfreaks.com/topic/286259-rotating-an-image/#findComment-1469340 Share on other sites More sharing options...
jairathnem Posted February 18, 2014 Share Posted February 18, 2014 .rotate90 { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } tried this? Link to comment https://forums.phpfreaks.com/topic/286259-rotating-an-image/#findComment-1469352 Share on other sites More sharing options...
spudly1987 Posted February 18, 2014 Author Share Posted February 18, 2014 Thank you, I was able to successfully rotate the image to the way I like thank you very much, just one more thing I hope i can bother you with I have the html information as is with an added caption for the image ****What I would like to attempt to do and I know it can be done, is to make it like a polaroid picture and then where the empty white space is have the caption,**** <figcaption>Something's I Received</figcaption> the above is the added caption tag I am using <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="practice.css" /> <title>Untitled Document</title> </head> <pre> <figure> <img id="image_canv" src="ashtoys.jpg" class="rotate45" height="300" width="300" /> <figcaption>Something's I Received</figcaption> </figure> </pre> <body> </body> </html> The below is the CSS script I am using for everything .rotate45{ margin:40px; width:200px; height:200px; overflow:hidden; border-radius: 28px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari and Chrome */ position:relative; /* non-essential styling */ -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05); box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05); } .imagecontainer img{ transform: rotate(-45deg); -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari and Chrome */ position:absolute; top:100px; left:100px; } figcaption{ transform: rotate(-45deg); -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* non-essential styling */ margin:-600px -125px -50px; font-family:'Oswald', Arial, Sans; font-size:20px; text-transform:uppercase; letter-spacing:.05em; } Link to comment https://forums.phpfreaks.com/topic/286259-rotating-an-image/#findComment-1469358 Share on other sites More sharing options...
jairathnem Posted February 18, 2014 Share Posted February 18, 2014 .polaroid { position: relative; background: #fff; width: 200px; padding: 7px; margin: 10px; text-align: center; -moz-box-shadow: 1px 1px 3px #222; -moz-transform: rotate(-5deg); -webkit-box-shadow: 1px 1px 3px #222; -webkit-transform: rotate(-5deg); box-shadow: 1px 1px 3px #222; -o-transform: rotate(-5deg); transform: rotate(-5deg); } Add the polaroid class to css and use div class with polaroid for the image tag. Again this was taken fro google tested and it works. Link to comment https://forums.phpfreaks.com/topic/286259-rotating-an-image/#findComment-1469370 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.