pepebe
10/17/2012 - 2:03 PM

CSS3 - Rotatation and positioning to the side with jquery

CSS3 - Rotatation and positioning to the side with jquery

gistfile1.html
content_copyfile_download
<html>
<head>
<title>rotate</title>

<style>

    .btn {
        color: #fff;
        border-radius: 5px;
        padding: 5px;
    }

    .with { background: #1ec017; }
    .without { background: #c04442; }
    .simple { background: #2555c0; }


    .top50 {
        position: fixed;        
        top: 50%;
    }
    
    .right0 {
        /* Instead of 0 we need a negative value here: -1*((width/2)-(height/2)) */
        right: 0;
        left: auto;
    }
    
    .left0 {
        /* Instead of 0 we need a negative value here: -1*((width/2)-(height/2)) */
        left: 0;
        right: auto;
    }

    .rotate90 {
      -webkit-transform: rotate(90deg);  /* Safari 3.1+, Chrome */ 
         -moz-transform: rotate(90deg);  /* Firefox 3.5-15 */
          -ms-transform: rotate(90deg);  /* IE9+ */
           -o-transform: rotate(90deg);  /* Opera 10.5-12.00 */
         -ms-transform: rotate(-90deg);  /* Should work in ie. Check versions... */
              transform: rotate(90deg);  /* Firefox 16+, Opera 12.50+  */
    }
    
    .rotate270 {
      -webkit-transform: rotate(270deg);  /* Safari 3.1+, Chrome */ 
         -moz-transform: rotate(270deg);  /* Firefox 3.5-15 */
          -ms-transform: rotate(270deg);  /* IE9+ */
           -o-transform: rotate(270deg);  /* Opera 10.5-12.00 */
         -ms-transform: rotate(-270deg);  /* Should work in ie. Check versions... */
              transform: rotate(270deg);  /* Firefox 16+, Opera 12.50+  */
    }


</style>

</head>
    <body>
        <div class="btn                  top50 right0 simple">jQuery: 0</div>    
        <div class="btn rotate90         top50 right0 without">jQuery: 0</div>
        <div class="btn rotate90 sticky  top50 right0 with">jQuery: 1</div>

        <div class="">If we rotate a box and move it to the side, it is not positioned as we would like. 
                      This is because if you rotate an element, the width stays the same. 
        </div>
        
    
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>
            
            $(window).load(function(){
                    
                    $(".sticky").each(function(e)
                    {
                        height = $(this).height();
                        width  = $(this).width();
                        offset = -1*((width/2)-(height/2));
                        
                        
                        if($(this).hasClass('right0'))
                        {
                            $(this).css({"right": offset });
                        }
                        if($(this).hasClass('left0'))
                        {
                            $(this).css({"left": offset });    
                        }
                        
                        
                        
                    });

                    $(".top50").each(function(e)
                    {                    
                        $(this).css({'margin-top': -height});
                    });
                    
                });                 
            
        </script>
        
    </body>
</html>