Java ' C' handu: Rotate Text JavaScript+CSS transform jquery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">

.normal
{
    position:relative;
    display:inline-block;
    background-color:yellow;
}

.rotate
{
/* Rotate div */
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* Internet Explorer */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}
</style>
</head>
<body>

<div class="normal">Chandu Loves Snigdhu</div>

</body>
<script>
    /*
    $('.clicktorotate').bind('click',function(e){
        var e = $('.normal');
        if(!e.hasClass('rotate')){
            this.innerHTML='normal'
            e.addClass('rotate');
            return;
        }
        this.innerHTML='rotate'
        e.removeClass('rotate');

    });
    */

    $(function(){
        var e = $('.normal');
        e.addClass('rotate');
        e.css('top',e[0].offsetWidth/2+'px');

    }
    );


</script>

</html>

Thursday, April 26, 2012

Rotate Text JavaScript+CSS transform jquery

No comments:

Post a Comment