When an object is rotated +180° everything inside it gets flipped so that it is still readable (I guess), I want to avoid that , how to do it?
Just wrap your text in a div and rotate it with an opposite value of the degree that you assign to your parent div:
div.flipped {
background: lightblue;
padding-left: 150px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
div.noflipped {
background: lightblue;
padding-left: 150px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
Demo: http://jsfiddle.net/uTGXx/7/
Related
I've been fiddling around with a small problem with an animation that I can't really figure out the problem to.
I have this perfectly working example from w3 schools, but my case is a little different. I am trying to have 2 visible lines in my burger menu, and they are both supposed to be a little smaller.
I have this working code.
The code that is causing me trouble is the following:
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
I have tried to change the translate statements with so many different numbers and I tried reading to figure out exactly what the translate-statements do when they are placed like they are after the rotate. I just can't figure out exactly how to make the two lines create a cross on their "starting" location (that is without moving to the right or left - too much)
My question is:
What does the translate statements do when they are placed like they
are?
How could I figure out how to make my lines create a cross in their starting position?
I am basically looking for a good method to figure out my problem myself. But if a bright mind out there could supply me with my solution I wouldn't mind. :)
function myFunction(x) {
x.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar3 {
width: 35px;
height: 2px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.invis {
width: 35px;
height: 2px;
margin: 6px 0;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 6px);
transform: rotate(-45deg) translate(-5px, 6px);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-5px, -6px);
transform: rotate(45deg) translate(-5px, -6px);
}
<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="invis"></div>
<div class="bar3"></div>
</div>
Should work.
Those numbers are X and Y position. Because you removed the middle line, the position is a little off.
X: Should be same for both. Increase/decrease moves it either left or right.
Y: Should be opposite, so they form a nice cross.
You do not need to guess the numbers for translate through trial and error. You can calculate them pretty simply.
That is why it would be useful to add to the answers above, how to calculate the numbers which should be used for translations.
Speaking about your example.
.bar1, .invis, .bar3 {
width: 35px;
height: 2px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
The height of the bar is 2px and both of the spaces between bar1-invis and invis-bar3 is 6px each. Keep in mind that these bars have collapsing margins. That means that these margins overlap and the distance between the bars will equal the size of one margin.
Vertically we should move the bars to the middle (the position of invis bar).
What is the height of the entire hamburger icon?
For bar2 with opacity: 0 after click: 18px (2px + 6px + 2px + 6px + 2px)
For bar2 with display: none after click: 10px (2px + 6px + 2px)
In this example our borders are 0px, so we do not take them into account.
How much we would need to move bar1 and bar3 in order for them to be in the same position in the middle?
In the case of opacity: 0; it will be a margin size + the object height, so 8px in our example.
In the case of display: none; (I assume the object is vertically centred), it will be (margin + height) / 2 (in our case 4px).
Then we rotate one of the bars by 45 degrees and another one by -45 degrees.
This is a visual presentation of how it works:
Then you add the transition to your CSS.
What you are left with is this:
.change .bar1 {
-webkit-transform: rotate(-45deg) translateY(8px);
transform: rotate(-45deg) translateY(8px);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translateY(-8px);
transform: rotate(45deg) translateY(-8px);
}
.change .invis {
opacity: 0;
}
or this:
.change .bar1 {
-webkit-transform: rotate(-45deg) translateY(4px);
transform: rotate(-45deg) translateY(4px);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translateY(-4px);
transform: rotate(45deg) translateY(-4px);
}
.change .invis {
display: none;
}
What does the translate statements do when they are placed like they
are?
Because the center point of each bar is different, so their references are different.
How could I figure out how to make my lines create a cross in their
starting position?
You have to move the bars somehow, using position properties (top/right/bottom/left), translate or other way. It's not easy to make it right, because it is inside a container with specific size, so each case is different and the bars are placed in different positions.
I strongly recommend to use DevTools to adjust the element inside the container.
This is how it is in the middle of the container:
.change .bar1 {
transform: rotate(-45deg) translate(-7px, 5px);
}
.change .bar3 {
transform: rotate(45deg) translate(-6px, -4px);
}
I hope this helps to clarify some points.
With some playing with numbers I've reached this:
It looks Like Exact X icon.
function myFunction(x) {
x.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar3 {
width: 35px;
height: 2px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.invis {
width: 35px;
height: 2px;
margin: 6px 0;
}
.change .bar1 {
transform: rotate(-45deg) translate(-5px, 6px) ;
}
.change .bar3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="invis"></div>
<div class="bar3"></div>
</div>
This question already has answers here:
How to apply multiple CSS3 rotation transformations (compounded) without javascript?
(2 answers)
Closed 7 years ago.
So I have the following CSS:
div {
transform: translate(10, 10);
}
div.active {
transform: scale(1.1);
}
The problem is that a div.active doesn't translate and only scales.
Ain't there a CSS-only (with JS I know I can) way to write something like:
div.active {
transform: inherit scale(1.1);
}
?
Is this some kind of CSS3 design issue?
div {
transform: translate(10px, 10px);
width: 100px;
height: 100px;
background: lightblue;
display: inline-block;
margin: 50px;
}
div.active {
transform: translate(10px, 10px) scale(1.1);
}
div.active2 {
transform: scale(1.1) translate(10px, 10px) rotate(45deg);
}
<div></div>
<div class="active"></div>
The transform property of your active class is overwriting the original value.
You would have to state both in your active class.
Note: translate values require units
div {
transform: translate(10px, 10px);
}
div.active {
transform: translate(10px, 10px) scale(1.1);
}
I'm trying to make a paper stack effect with pseudo elements.The CSS code is:
.body{background-color: #F5F5F5; height:100%;}
#content {
...
position: relative;
...
display: block;
}
#content:after,
#content:before {
display: block;
height: 100%;
left: -1px;
position: absolute;
width: 100%;
}
#content:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
top: 0;
z-index: -1;
}
#content:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
top: 0;
z-index: -2;
}
I've read that transform requires display:block . With this code the transformation isn't visible although the developer tools highlight the :before and :after elements. when i add z-index:2 on the #content element the stack is visible but the :after element is on top which has z-index: -1 . I guess it has to do with the .body .Is there a way to make this work? here is the fiddle: http://jsfiddle.net/KVsjK/4/
Moving the z-index from #content to .container in your jsFiddle example seems to make it display correctly. jsfiddle
Check out the second answer (with 74+ votes) on this similar question: Is it possible to set the stacking order of pseudo-elements below their parent element?
Important quote to note:
The actual answer to this question is that you need to create a new stacking context on the parent of the element with the pseudo element (and you actually have to give it a z-index, not just a position).
Some further reading here at MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Not sure if this is your whole problem, but you need to add content: '' to your :before and :after elements.
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>
I have made a fiddle:
http://jsfiddle.net/89x4d/
I'm trying to maintain the skewed div but keep the p text straight.
Is this possible?
Thanks
You should use 20deg instead of 0deg on P to compensate for the DIV transform (since the result is the composition of transforms.)
In order to cancel the effect of the skew, you have to give positive value of transformation.
p {
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
Demo
div {
width: 200px;
height:50px;
background: red;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
margin: 20px;
padding:0 25px;
}
p {
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
<div>
<p>hey i'm straight, ok?</p>
</div>
hey i'm straight, ok?
I'm not sure if you can get it to skew back, seems to distort the font too much.
skew(20) is the closest i could get, but instead you could setup 2 divs, 1 for a skew box and another to then move over it.
http://jsfiddle.net/gP9ne/3/
Setup a fiddle there for you to see
Martyn
edit: actually doesnt look any different :p i think its just the black on red with the font doesnt like my screen :p
always over thinking!
As others have pointed out, reversing the skew of the <p> can lead to some undesirable results.
It's also not super reusable in that for every new skew angle you would need a corresponding CSS selector/declaration to reverse the internal content.
As an alternative, use the :before selector to add the skewed element behind the text.
HTML
<div>
<p>hey i'm straight, ok?</p>
</div>
CSS
div {
width: 200px;
height:50px;
margin: 20px;
position:relative;
}
div:before {
content: "";
display:block;
background: red;
position:absolute;
width:100%;
height:100%;
z-index:-1;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}
And a demo.