absolute position rotated element to right corner

问题

Im trying to figure out how to make shopping cart tab that would be positioned on the right corner and also rotated 90 degrees. The rotation naturally mixes the position but maybe there's a workaround of wrapping to different wrappers etc....

Extra points if there wouldn't need to define width. I don't care about older browsers

回答1:

How about using transform-origin? See DEMO.

Relevant CSS:

#box {
    position: relative;
}
.bg {
    right: 40px; /* same as height */
    height: 40px;
    transform: rotate(-90deg);
    transform-origin: 100% 0;
    position: absolute;
    line-height: 40px; /* same as height, for vertical centering */
}

回答2:

Ana's answer is excellent and pointed me in the right direction, but I realised you could achieve the same effect without having to explicitly set the height, line-height and position for the element you want to move - instead, just set translate(0, -100%):

body {
  margin: 0;
}

#box {
  position: relative;
}

.bg {
	right: 0;
	padding: 1em;
	transform: rotate(-90deg) translate(0, -100%);
	transform-origin: 100% 0;
	position: absolute;
	background: #FF1493;
}

<div id="box">
	<div class="bg">        
		<div class="txt">He's not the Messiah. He's a very naughty boy.</div>
	</div>
</div>

...and a jsFiddle for good measure.

回答3:

To rotate text at 90° using CSS, consider using writing-mode.

Set position: relative; on the parent div, then use something like this on the rotated element:

#rot {
    position: absolute; /* only handy here because its parent is set to `position: relative;` */
    left: 0;
    top: 0px;
    /* writing-mode: sideways-lr;   /* Webkit browsers don't support `sideways-lr` yet */
    writing-mode: vertical-rl;  /* `vertical-rl` and a rotation will achieve the same effect */
    transform: scaleX(-1) scaleY(-1);
    height: 100%;

    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 2.85;
    color: white;
    font-weight: bold;
}

You'll end up with a div stacked on the side of your parent div, with the text at a 90° angle.

This way you don't have to think about the rotation origin.

回答4:

If you need to position wrapper div.and rotate child div so that its always centered vertically and horizontally, try something like this!

.togglewrap{
position:relative;
float:left;left:20%;top:0;
width:30px; 
height:120px;
background-color: #ffde21;
}
.sbartoggle {
    background:#f5f5f5;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    width:100%; 
    height:30px;/*equal to parent width*/
    line-height:30px;/*center text*/
    transform: rotate(-90deg);
    background-size:10px 10px;
    }

来源：https://stackoverflow.com/questions/11972286/absolute-position-rotated-element-to-right-corner

标签

css

css-transitions