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.
Related
I want to keep the name of my portal on the bottom left corner of the browser window in a vertical direction.
The following is the css styling i am using but the text is coming with a margin to the left and bit of text is also getting clipped.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:60px;
position: fixed;
left: 0;
bottom: 0;
}
can someone help in correcting my css class please.
here's the JSFiddle link
thank you.
lakshman.
Try this one :
.rotate {
transform-origin:0% bottom;
-moz-transform-origin:0% bottom;
-webkit-transform-origin:0% bottom;
-o-transform-origin:0% bottom;
-ms-transform-origin:0% bottom;
transform:rotate(-90deg) translateY(100%);
-moz-transform:rotate(-90deg) translateY(100%);
-webkit-transform:rotate(-90deg) translateY(100%);
-o-transform:rotate(-90deg) translateY(100%);
-ms-transform:rotate(-90deg) translateY(100%);
display: block;
writing-mode: tb-rl;
position: fixed;
left:0; bottom:0;
margin: auto;
font-size:60px;
background-color:lightblue;
}
<div class="rotate">
LeftBottom
</div>
If You change font-size, then change height and line-height too. You can add padding too, but then You don't need change height and line-height (only if font-size is changed).
There is fiddle example with changed font-size (height, line-height) and padding (just to see how it's working).
UPDATE : I made changes by removing height and line-height. Here and in fiddle example. It's working better.
look at this updated jsfiddle, when you rotate the text it does so from the middle of the div, so when its -90 degrees and on the bottom of the screen part of the div will rotate beneath the window.
.newRotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:70px;
position: fixed;
left: -100px;
bottom: 110px;
}
To alleviate this I changed the left and bottom position
You can try this and see if its what you are looking for.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:60px;
position: fixed;
left: -80px;
bottom: 90px;
}
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/
When I use this style with #board(the gray one)
-webkit-transform: perspective(500px) rotateX(45deg);
-moz-transform: perspective(500px) rotateX(45deg);
What it looks in Firefox:
But in chrome:
What we need is the one in Firefox. So what should we do to have same look in chrome?
Generally it's best practice to place the perspective on a containing element, such as the body or a wrapping div.
Demo: http://jsfiddle.net/amustill/Qh8YV/
body {
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
div {
...
-webkit-transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
}
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.
I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation?
Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution.
I tried the "transform: none" suggestion from this question prevent children from inheriting transformation css3, yet it simply doesn't work - please see the fiddle here: http://jsfiddle.net/NPC42/XSHmJ/
May be you have to write like this:
.child {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Check this for more http://jsfiddle.net/XSHmJ/1/
Updated:
You can use:after & :before psuedo class for this.
check this http://jsfiddle.net/XSHmJ/4/
I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.
This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:
.parent {
position: relative;
width: 200px;
height: 150px;
margin: 70px;
}
.child1 {
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.child2 {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If you want to apply transforming effects on a parent without affecting its children, you can simply animate a parent's pseudo-element like this:
.parent {
display: inline-block;
position: relative;
}
.parent::before {
content: "";
background: #fab;
/* positioning / sizing */
position: absolute;
left: 0;
top: 0;
/*
be aware that the parent class have to be "position: relative"
in order to get the width/height's 100% working for the parent's width/height.
*/
width: 100%;
height: 100%;
/* z-index is important to get the pseudo element to the background (behind the content of parent)! */
z-index: -1;
transition: 0.5s ease;
/* transform before hovering */
transform: rotate(30deg) scale(1.5);
}
.parent:hover::before {
/* transform after hovering */
transform: rotate(90deg) scale(1);
}
This actually worked for me. JSFiddle