I want to move a div from its center point, but it seems that translate() doesn't care what transform-origin is and uses top-left point of the element to move it.
Here is a test to confirm it:
<div class="items" style="">
<div class="item-1" style="width: 100px; height: 100px; background: blue; position: absolute; opacity: 0.5; transform-origin: 0% 0%; transform: translate(100px, 100px)"></div>
<div class="item-2" style="width: 100px; height: 100px; background: red; position: absolute; opacity: 0.5; transform-origin: 100% 100%; transform: translate(100px, 100px)"></div>
</div>
As you can see, bot items are overlapped while it shouldn't.
Question: How to position an element using its center point?
Note: As I'm rotating & moving these items using JS, so just subtracting half of item's width/height is not an option because it needs math that I don't know.
Related
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 3 years ago.
I learnt a new (new to me) way of centering divs from an online resource. I can not get hold of the author, so please explain what exactly is happening here.
<header class="header">
<div class="header-box">
<h1>
Lorem Ipsum <br>
Dolor sit amet
</h1>
</div>
</header>
.header {
position: relative;
height: 100vh;
background-image: linear-gradient(
to right bottom,
rgba(17, 63, 112),
rgba(253, 135, 31));
background-position: top;
}
.header-box {
position: absolute;
top: 50%; /*This and next line*/
left: 50%;
transform: translate(-50%, -50%); /*and this*/
}
h1 {
text-align: center;
}
How exactly the Transform property is aligning the div in center perfectly when the position property pushed it away?
https://jsfiddle.net/ux1r3eb0/
I'll describe this in the context of horizontal alignment, but exactly the same principles apply to vertical alignment:
The absolute position moves the element's left side to the centre of the screen, then the transform moves the element's centre left by half it's width, which lines up the centre of the element with the centre of the container.
Visual example (I'm only showing the horizontal movement, to make it easier to understand):
.container {
position: relative;
width: 100vw;
height: 100vh;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/AAAZ4gk3AAAACklEQVR4XmNgAAAAAgAB3p6PvwAAAABJRU5ErkJggg==');
background-position: center;
background-size: 1px 100%;
background-repeat: no-repeat;
}
.content {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
border: 1px solid #F00;
animation-name: demo;
animation-duration: 8s;
animation-fill-mode: forwards;
}
#keyframes demo {
0% {
left: 0%;
transform: translate(0%, -50%);
}
50% {
left: 50%;
transform: translate(0%, -50%);
}
100% {
left: 50%;
transform: translate(-50%, -50%);
}
}
<div class="container">
<div class="content"></div>
</div>
The top and left property pushed away the .header-box from the top and left side of .header. 50% value means 50 percent of height and width of .header
while the translate(-50%, -50%) makes the .header-box to pull back itself by half of the size of itself.
When you use percentage in top, left, right, bottom property, it uses the size of closest positioned ancestor element, while the transform uses the size of itself.
I create two squares with z translate and put in perspective-origin in css.
This is the link to jsbin: https://jsbin.com/bebucum/edit?html,output.
Following is the most relevant CSS:
.container {
-webkit-perspective: 700;
-webkit-perspective-origin: 450px 000px;
}
.square:nth-child(1) {
-webkit-transform: translateZ(100px);
}
.square:nth-child(2) {
background: yellow;
-webkit-transform: translateZ(-200px);
}
Most of the output makes sense to me. However there is one part I do not quite understand.
I think the yellow square should be below the blue one, as its translateZ is negative. But the output is the other way around.
Can someone help me understand this behavior?
To achieve correct 3d positioning, you need to set
transform-style: preserve-3D;
I have also removed webkit prefixes, they aren't necesary now.
.container {
perspective: 700px;
perspective-origin: 450px 0px;
transform-style: preserve-3D;
}
.square {
background: blue;
position: relative;
top: 300px;
left: 300px;
height: 100px;
width: 100px;
}
.square:nth-child(1) {
transform: translateZ(100px);
}
.square:nth-child(2) {
background: yellow;
transform: translateZ(-200px);
}
<div class="container">
<div class="square">
</div>
<div class="square">
</div>
</div>
I am trying to understand what is really happening “3d” world of CSS.
I made a simple example
Particularly the code which bugs me the most is:
.back {
background-color: tomato;
transform: rotateY(180deg);
z-index: 1;
}
The thing which is not clear to me is why when you hover over .inner, its background color (gold) is not visible?? If you remove the transform property from .back or if you set the rotateY to 0deg then the gold background color of the .inner is clearly visible.
Why is the transform property of .back changing the stacking order?
Logically it makes sense that children(.front and .back) should appear in front of their parent(.inner).
Also, I would like to know what really happens when you set transform-style to flat? Does that make parent and all of its children collapse into single “unit” where element with highest stacking order takes priority/visibility?
in your code :
.outer {
display: block;
width: 200px;
height: 200px;
border: 2px solid gold;
perspective: 1000px;
padding: 10px;
margin: 0 auto;
}
.inner {
position: relative;
height: 100%;
width: 100%;
transition: transform 2s linear;
transform-style: preserve-3d;
background-color: gold;
backface-visibility: visible;
transform: rotateY(50deg);
}
.sides {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
color: white;
backface-visibility: hidden;
}
.front {
background-color: blue;
transform: translateZ(20px)
}
.back {
background-color: tomato;
transform: rotateY(180deg) translateZ(10px);
}
.inner:hover {
transform: rotateY(180deg)
}
<div class="outer">
<div class="inner">
<div class="sides front">Front Side</div>
<div class="sides back">Back Side</div>
</div>
</div>
you are using
transform: rotateY(180deg) translateZ(10px);
The transforms are applied right to left, so first it goes to the front 10px. But after that, it rotates 180deg. (around the transform-origin that is constant). That makes the previous 10px go towards the back instead of to the front.
if the order is the inverse
transform: translateZ(10px) rotateY(180deg);
now the rotation is done first, and so the translation is unafected by it and goes to the front.
and No, sorry, z-index is not a substitute for 3-d transforms, if you want to use 3d transforms, translation is the only way to go ....
In your first example, z-index is useless, as can be seen easily
codepen with z-index removed
This works because you are setting
backface-visibility: hidden;
So only the face that is facing front will be visible
I would like to rotate a full-width div (from side to side without free space) in which will be some content.
I want the corners on the right side to touch the right side of the page and the corners on the left side to touch the left side of the page. I don't think width:200% and overflow-x:hidden is the best solution.
How can I achieve this?
Here is an example. Note that the corners don't touch the sides of the page.
.rotated {
width: 100%;
height: 100px;
background-color: red;
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
<div class="rotated"></div>
You might find the CSS transform skewY() helpful. It will skew the element without rotating the corners.
I've also set the transform-origin to the top right so that the element doesn't skew off the top of the page.
html,body {
margin: 0;
}
.rotated {
height: 100px;
background-color: red;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
transform: skewY(-6deg);
}
<div class="rotated"></div>
For further reference, see the Skewing and Translating example at MDN.
You could increase the horizontal proportion with scale, but the content will be scaled as well (as long as you know it you can compensate)
.rotated {
width: 100%;
height: 100px;
background-color: red;
transform: scale(1.2 , 1) rotate(-6deg);
}
<div class="rotated"></div>
Consider the following attempt to rotate a paragraph 90 degrees and position it so that the corner that was initially its top-left corner (and which therefore becomes its top-right corner after the rotation) ends up located at the top-right corner of the parent block.
HTML:
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<p id="text">Foo bar</p>
</div>
</body>
</html>
CSS:
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
transform: rotate(90deg);
position: absolute;
top: 0;
right: 0;
}
In Firefox 19.0.2 on OS X 10.6.8, it fails. This appears to be because, despite the order in which the CSS properties were given, the transformation is applied after the positioning. In other words, the browser:
places #text such that its top-right corner is located at the top-right corner of the parent block, but only then
rotates it, with the result that what is now its top-right corner is not located at the top-right corner of the parent block.
As a result, the transform-origin property isn't much use here. If, for instance, one used transform-origin: top right; then #text would need to be moved downwards by the width it had before it was rotated.
My question: is there a way to tell the browser to apply the CSS positioning properties after the rotation; and if not, then is there instead a way to move #text downwards (e.g. using top:) by the width it had before it was rotated?
NB. Ideally the solution should not require setting a fixed width: for #text, and must not require JavaScript.
You can apply more than one transform to an element, and the order does matter. This is the simplest solution: http://jsfiddle.net/aNscn/41/
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
background: lightBlue;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translate(100%) rotate(90deg);
transform-origin: left top;
-webkit-transform: translate(100%) rotate(90deg);
-webkit-transform-origin: left top;
}
The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Rotating -90deg.
.rotate {
position:absolute;
-webkit-transform-origin: left top;
/* Safari */
-webkit-transform: rotate(-90deg) translateX(-100%);
/* Firefox */
-moz-transform: rotate(-90deg) translateX(-100%);
/* IE */
-ms-transform: rotate(-90deg) translateX(-100%);
/* Opera */
-o-transform: rotate(-90deg) translateX(-100%);
}
Solved: here
This is the code I've added:
left: 100%;
width: 100%;
-webkit-transform-origin: left top;
I've also added some prefixed transform properties so it will be cross browser
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
How I did it:
I've found this question and, as the name of the website says, "fiddled" with the code to obtain this behavior. I guess the solution is left: 100%; instead of right: 0;.
(the width: 100%; is there because for some reason it wasn't 100% and the text would overflow to the next line)
You may want to try using CSS3 #keyframes animation. It will allow you to rotate and reposition in any order you like. Here is a tutorial that may help: [CSS-Tricks][1]
.container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
p {
border: 1px solid blue;
position: absolute;
top: auto;
right: 0;
display: inline-block;
margin: 0;
animation: 1s rotate 1s both;
}
#keyframes rotate {
0% {
transform-origin: top left;
transform: rotate(0deg);
right:0;
}
50% {
right:0;
}
100% {
transform-origin: top left;
transform: rotate(90deg);
right: -64px;
}
}
<div class="container">
<p>some text</p>
</div>
You might want to play around with the translate option which you can apply as the second transform function after rotate and place your element at the exact position that you want to.
There is no other way I guess to tell the browser to use the position properties after the transform function is used using plain css.
See this demo - http://codepen.io/anon/pen/klImq
Place "!important" at the end of the transform line.