CSS3 - Rotatation and positioning to the side with jquery
<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>