Menu
I have three divs using CSS3 translations in all directions within a container div that is itself within an outer, fullscreen div. The outermost div, the full screen one, has perspective set on it.
HTML
<div class='outer'>
<div class='container ofhidden'>
<div class='item' id='item1'></div>
<div class='item' id='item2'></div>
<div class='item' id='item3'></div>
</div>
</div>
CSS
.outer {
perspective: 1000;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.outer .container {
background-color: grey;
width: 130%;
height: 100%;
padding: 1em;
}
.outer .container.ofhidden {
overflow: hidden;
}
.outer .container .item {
border: 1px solid black;
width: 50px;
height: 50px;
}
.outer .container .item#item1 {
background-color: green;
transform: translate3d(10px, 10px, -10px);
}
.outer .container .item#item2 {
background-color: goldenrod;
transform: translate3d(10px, 10px, 0);
}
.outer .container .item#item3 {
background-color: red;
transform: translate3d(10px, 10px, 10px);
}
The div that contains the translated elements has overflow: hidden; set on it which disables or ignores the translation in the Z direction while not effecting the other directions.
Please see this pen http://codepen.io/aaron/pen/Ihrxj for the code and a button which toggles overflow: hidden; to demonstrate the effect.
For those not familiar with HAML, SCSS/Compass, or CoffeeScript, you can click on the name of the preprocessor next to HTML, CSS, and JS to see the generated code in the codepen.
501
visible - Default. The overflow is not clipped. The content renders outside the element's box. hidden - The overflow is clipped, and the rest of the content will be invisible.
<p>Overflow:hidden means that the overflow will not render outside the element's box. Instead, it will be clipped at the box's padding edge. This value differs from "clip" in that it still allows programmatic scrolling, which means the box is technically a scroll container.</p> <div id="example1">This is dummy text.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. Note: The overflow property only works for block elements with a specified height.
I don't know why this is happening, but i can suggest a couple of workarounds.
An obvious solution is to set overflow: hidden; (if you really need it) on items (either with .item or .container > *, instead of applying it to the container.
Another option is to position items absolutely. It's not very handy but it might work out for your layout (you can position items absolutely relatively to the container).
In both cases transform3d won't be disabled/ignored.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
