Menu
I need to rotate a text at different angles at button click.
I need two button, one to move text clockwise and other to move text anticlockwise.
743
Rotating an image using CSS Once the CSS code is applied to your . css file, stylesheet, or <style> tags, you can use the CSS class name in any of your image tags. To rotate an image by another measure of degrees, change the "180" in the CSS code and <img> tag to the degree you desire.
Do one of the following steps: Select the text box, and then go to Shape Format or Drawing Tools Format > Rotate. Use any of the rotate commands in the list. Manually rotate the text box by selecting the text box rotation handle and dragging in the direction you want.
You can check it out there, or at the CodePen below. To trigger the transition effect we have to add an onclick event attribute to each button. This fires off a bit of JavaScript that applies an active class to the button. With this class the can then rotate the button with transform: rotate(45deg) .
try this:
html:
<input id="rotateBtn" type="submit" value="rotate"/>
<div class="textToRotate">text to be rotated</div>
css ( tip: use transform-origin to control rotation anchor point, here used only for webkit )
.rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
-webkit-transform-origin: 0 0 ;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /*IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
jQuery on document ready:
$('#rotateBtn').click(function() {
$('.textToRotate').addClass('rotate');
});
check it out here: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/2/
update: each click increments 20degrees: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/5/
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
