The problem description refers to the following example: http://codepen.io/NilsWe/pen/yoksj
The background of the .main container flickers on the CSS transition in all webkit browsers.
Any of the solutions out there like:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
doesn't seem to work.
Are there any other suggestions?
Try removing
//-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
//-webkit-transform-style: preserve-3d;
That has worked for me in the past.
Also the flickering can be caused by not defining the size of the manipulated element. Make sure you define the height and width of elements that are being manipulated.
I think that there is a conflict between the position of the navbar and the main.
I have changed the positioning from float to absolute, and moved things changing left instead of margin-left; I think that now it works ok
CSS
.nav,
.main {
position: absolute;
height: 100%;
padding: 5em 0 0 0;
background: rgb(150,150,150);
text-align: center;
#include transition(margin-left 5s ease, margin-right 5s ease, left 5s ease);
}
.nav {
width: 30%;
left: -30%;
}
.main {
width: 100%;
margin-left: 0;
margin-right: 0;
background: rgb(200,200,200);
background: url(http://farm6.staticflickr.com/5476/9299430029_08b1ea7494_h.jpg) no-repeat bottom center;
#include background-size(cover);
}
/* ========== active state ========== */
.active-nav .nav {
left: 0%;
}
.active-nav .main {
left: 30%;
margin-right: -30%;
}
demo
Updating the width and height fixed the issue for me.
Related
I have a parent div wrapped around a scaled child div. The child div starts off with transform:scale(0,0); & expands to transform:scale(1,1); when a button is clicked.
.content-wrapper {
display: inline-block;
background-color: #ddf;
padding: 10px;
clear: both;
}
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
}
.content.open {
transform:scale(1,1);
}
However the parent div content-wrapper stays at the same size of the child div content - even when the child is "closed".
The desired behaviour is when the child div is closed the parent div shrinks to only wrap around the button.
JSFiddle of Example
Is it possible to wrap the parent div around the child div when it's "closed" in this example?
This will be a little challenging because the background color is attached to the content container. I would remove the background color from the main container, then make it a separate div positioned absolute
<div class="content">
...
<div class="content-bg"> //contains your background color
then manipulate that based on your click handler.
I've updated the JSFiddle http://jsfiddle.net/ztxa5kwu/90/
CSS for the new div:
.content-bg{
position: absolute;
background-color: #ddf;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
transition: all .5s ease;
transform-origin: bottom right;
}
Notice the transform-origin: bottom right; to scale the background towards your button. In the JSFiddle, I made the button take on a border the same color as the background, but you could easily edit the size of the new <div class="content-bg"></div> to fit around your button.
Hope that helps, and gets you in the right direction.
Try this:
.content {
background-color: #fff;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
display: block;
padding: 0;
height: 0; width: 0;
}
.content.open {
padding: 10px;
height: auto; width: auto;
transform: scale(1,1);
}
Edit: Play with this:
.content {
padding: 0;
background-color: #fff;
display: block;
overflow: hidden;
transform-origin:top;
transition: transform 1s ease-out, max-width 0.5s ease-out 0.4s, max-height 1s ease-out;
transform: scale(0,0); max-width: 0; max-height: 0;
}
.content.open {
padding: 10px;
transition: transform 1s ease-out, max-width 1s ease-out, max-height 8s ease-out;
transform: scale(1, 1); max-width: 1920px; max-height: 1080px;
}
I found this comment on an older question:
This method only partially achieves the desired effect but doesn't
actually remove the space. The transformed box acts like a
relatively positioned element - the space is taken up no matter how it
is scaled. Check out this jsFiddle which takes your first one and
just adds some bogus text at the bottom. Note how the text below it
doesn't move up when the box height is scaled to zero. – animuson♦ Jul
29 '13 at 20:37
So with that in mind I used the max-height/ max-width hack to get something close to what I was after: http://jsfiddle.net/BaronGrivet/ztxa5kwu/176/
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:all 1s ease-out;
max-width: 0;
max-height: 0;
}
.content.open {
transform:scale(1,1);
max-width: 500px;
max-height: 500px;
}
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 try to make image gallery using bootstrap and my custom CSS. I want to make if the user hover on the image, the picture will getting bigger on its place. Everything is done by only using css but I have a little problem regarding the grid of my image. When I hover the most right image, the position will be mess. Here is my experiment : http://hanzoclothing.com/lookbook/chapter-iii
CSS:
.lookbook-item{
position: relative !important;
}
.lookbook-item:hover{
z-index: 5;
}
.lookbook-item .thumb{
opacity: 1 !important;
}
.lookbook-item .thumb img{
-webkit-transition: all 1s ease-in-out;
transition: all 0.3s ease-in-out;
}
.lookbook-item .thumb:hover img{
position: absolute;
min-width: 600px;
max-width: 600px;
margin-top: -40px;
margin-left: -50px;
/* top: 200%;
left: 23%;*/
z-index: 6;
}
I'd be tempted to use transform: scale(xxx); for this. It will do exactly what you want without effecting other elements:
.lookbook-item .thumb:hover img {
/* position: absolute; */
/* min-width: 600px; */
/* max-width: 600px; */
/* margin-top: -40px; */
/* margin-left: -50px; */
z-index: 6;
transform: scale(2);
}
If you want to keep the offset you currently have, you could use the following:
transform: scale(2) translate(50px, 40px);
I'm working on a ghost floating here.
The issue I'm having is the transform-origin property. Right now the shadow (the ellipse on the bottom) seems to be expanding from the left to the right and then shrinking in that direction again. The behavior I wanted was for the shadow to expand and shrink from the middle - hence the transform-origin: 50% 50%;.
Here's the relevant code, although it helps to look at the Codepen:
.container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -64.5px;
margin-top: -85.5px;
}
.shadow {
margin-left: 22px;
animation: shrink 3s ease-out infinite;
transform-origin: center center;
ellipse {
transform-origin: center center;
}
}
#keyframes shrink {
0% {
width: 20%;
}
50% {
width: 27%;
}
100% {
width: 20%;
}
}
If anyone has any ideas, thank you so much! Really struggling with this for some reason.
Okay I got a solution for you.
What I did was use margin and width for the animation to keep it centered. I also gave the p tag that is containing the svg shadow a set width of the ghost to keep the shadow centered.
Here is the css I edited,
.shadowFrame {
width: 130px;
}
.shadow {
animation: shrink 3s ease-out infinite;
transform-origin: center center;
ellipse {
transform-origin: center center;
}
}
#keyframes shrink {
0% {
width: 90%;
margin: 0 5%;
}
50% {
width: 60%;
margin: 0 20%;
}
100% {
width: 90%;
margin: 0 5%;
}
}
Here is the live link.
I'm wondering how the people at Panic made the stickies in their blog page!!!
http://www.panic.com/blog/
I got the 3d trasformation, but i really can't understand how they did the moving shadow!
any idea?
(Warning: webkit browser needed)
Just look at the source. They scaled the shadow up (vertically) by 2%.
#features ul li:hover div {
-webkit-transform: scaleY(1.02);
}
The origin and css transition was set in an earlier declaration.
#features ul li div { /* fake blank div included at the start of each out; it holds the shadow */
width: 225px;
height: 210px;
position: absolute;
top: 0;
background-repeat: no-repeat;
-webkit-transform-origin: 0 0;
-webkit-transition: -webkit-transform .4s ease;
}