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" /> Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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? Quote Link to comment 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; } Quote Link to comment Share on other sites More sharing options...
Solution jairathnem Posted February 18, 2014 Solution 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.