I am trying to position the ::before ::after css selector to the popup modal whenever the box is hovered
Reproducible stackblitz
https://stackblitz.com/edit/angular-o389e8?file=src/app/app.component.scss
The css selector should be placed before or after the popup modal and positioned vertical center w.r.t the hovered box.
So the arrow should appear attached to the popup modal, similar we have for a tooltip
The positioning of modal per say is already as per expectation , only the ::before ::after arrow positioning needs to be corrected.
Only For reference
Rather than using :before, you can create the arrow using clip-path
.arrow {
height: 20px;
width: 20px;
clip-path: polygon(0 50%, 100% 100%, 100% 0);
background: red;
}
<div class="arrow"></div>
Now, you can use ElementRef to get hold of the fs-modal element and change the top value for .arrow class
Updated StackBlitz Demo
In the below fiddle, <a> tag LOGO is absolute positioned within a layoutDiv div which is having -webkit-transform: translate3d(0,0,0); CSS being applied via 'modern' class.
https://jsfiddle.net/gurumvg/ubj98j6d/4/
Though the layoutDiv div is not having 'relative' position the <a> tag LOGO is positioned absolutely w.r.t layoutDiv div instead of BODY node. Wondering why the -webkit-transform: translate3d(0,0,0); style is positioning it as relative.
Appreciate any insights.
This is because the transform creates a new local coordinate system, as per W3C spec
I want to create a button (using only css and html) that reveals another button beneath it on hover by rotating on it's lowermost axis.
I've been mostly successful: http://codepen.io/machinarius/pen/BdtCb
But as you can see on my pen the hover behaviour is flaky at best, it resets the animation on any movement of the cursor. Why id that happening? Isn't -webkit-animation-fill-mode: both; supposed to reverse the animation once the selector goes off?
There seem to be two parts to this question:
Why is the hovering flaky?
Like Palpatim said, as soon as the unfold-button is hovered over, it jumps away, so you'll need to have an unmoving element that will catch your hovers without un-hovering itself. So let's add a div that will do this:
<div class="container">
<div class="unfold-button orange">
Hello World
</div>
</div>
Likewise, let's update the CSS selector accordingly:
.container:hover .unfold-button {
Now if you put that in your HTML, you'll see that the hovering is no longer flaky. However, as you described, it still isn't animating back into place. This brings us to our second question:
Why is the animation not reversing?
Actually, animation-fill-mode does not mean that the animation will reverse back when the animation is no longer assigned; it only determines what attributes "fill out" before and after the animation occurs. If you remove the line defining animation-fill-mode, you'll see that the only difference is that, without it, the animation reverts after completing.
Also, elements have no memory of the animation values that they used to have, so as soon as an element's animation attribute changes, the element immediately "pops" into what it is assigned to be with no influence from any previous values of animation.
As a result, what's actually happening with your CSS is that, when the unfold-button is hovered over, it is handed the unfold animation and plays it (like it should), but when it is un-hovered, it suddenly has no animation assigned, so having "forgotten" about the animation, it just snaps back to what it was originally assigned to be.
Considering that the unfold animation is one simple motion, I would recommend expressing it instead as a transition:
.unfold-button {
/* ... */
border-style: none;
box-sizing: border-box;
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-webkit-transition: 0.5s;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
.container:hover .unfold-button {
-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
Note how the transition attribute is maintained throughout both the hovered and non-hovered states. Like with animation, no animation results from it without its immediate presence.
And there you have it!
If the HTML and CSS look like what I have sitting in front of me right now, all should be good.
There's a little bit more information about reversing a CSS animation on hover-out here:
How to make CSS Animation reverse on hover-out?
The problem is that you're applying your animation on the :hover pseudo-class. Once the animation happens, you're no longer hovering, and so the animation resets. Try wrapping a container class around your animation element, and applying your animation trigger to the container's :hover, as in the example on https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode.
I want to create this triangle in CSS.
http://acceptatie.foursites.nl/foursites/vierkant.jpg
But it must be a fluid triangle. How can i make this I try with skewY. But than the triangle is broken at the to of the element.
Thank you for helping me!
Instead of using borders to make the triangle you can use transform to rotate a div and just hide the overflow of the parent element.
If use transform instead of borders you can have box shadow on the div to :)
Tranform code for rotating a div
-webkit-transform: rotate(357deg);
-moz-transform: rotate(357deg);
-ms-transform: rotate(357deg);
-o-transform: rotate(357deg);
and as i said just hide the overflow on the parent element, in your case the body tag
overflow: hidden;
But here is an example on jsfiddle
Hope you can use it.
I have two absolutely positioned div elements that overlap. Both have set z-index values via css. I use the translate3d webkit transform to animate these elements off the screen, and then back onto the screen. After the transform, the elements no longer respect their set z-index values.
Can anyone explain what happens to the z-index / stack-order of the div elements once I do a webkit transform on them? And explain what I can do to keep the stack-order of the div elements?
Here is some more information on how I am doing the transform.
Before the transform, each element gets these two webkit transition values set via css (I am using jQuery to do the .css() function calls:
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
The element is then animated using the translate3d -webkit-transform:
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
Btw, I have tried setting the 3rd parameter of translate3d to several different values to try to replicate the stack-order in the 3d space, but to no luck.
Also, iPhone/iPad and Android browsers are my target browser that this code needs to run on. Both support webkit transitions.
This might be related to: https://bugs.webkit.org/show_bug.cgi?id=61824
Basically when you apply a 3D transform on the z-axis, the z-index can't be accounted for anymore (you're now in a 3 dimensional rendering plane, use different z-values). If you want to switch back to 2D rendering for child elements, use transform-style: flat;.
This is most definitely related to the bug noted by samy-delux. This should only affect any elements which are positioned as absolute or relative. In order to remedy the issue, you can apply the following css statement to every element which is positioned this way and is causing issues:
-webkit-transform: translate3d(0,0,0);
This will apply the transform to the element without actually doing a transformation, but affecting its render order so it is above the element causing the issue.
Bit Late to this but try putting on the elements that have lost their Z-index placing the following, I had an issue when doing some parallax stuff recently and this helped massively.
transform-style: preserve-3d;
This saves putting
transform: translate3d(0,0,0);
On other elements which puts more strain on the GPU
Waiting to see the example
Have you tried to do a transform scale(1)? I remember to had a similar problem, and I had to re-arrange the html order of elements, and utilise a transform that I didn't need it just because the z-index of the use of transform changed.
If I am not in error, every time that you use a transform, it become the highest z-index available, and it is ordered by the nearest element of html is to the start of the tag. So from up to below.
I hope that this help
z-index will work against 3d transformed divs if you style the stackable element with -webkit-transform: translateZ(0px);
Snippet on codepen -> http://codepen.io/mrmoje/pen/yLIul
In the example, the buttons stack up and stack down raise and lower the footer's z-index (+/-1) against the rotated element (an img in this case).
I haven't been able to reproduce the problem you describe here. Regardless of what I do, the z-index value is retained throughout all transforms. I'm testing using Chromium (Google Chrome).
The third argument of the translate3d function manipulates the z-axis of the element. The concept is similar to, but not exactly the same as, the z-index... Elements with a lower z-axis are under elements with a higher value.
I know you tried values of the third argument to match your intended z-index, but the problem is that the z-axis doesn't seem to change during CSS3 animation. In the following example, the hovered element should be on top, but #element_a stays on top.
If I add a z-index to both the regular selector and the :hover selector, it seems to work and allow the hovered element to be top-most.
Although it's not exactly what you were looking for, this behavior provides a solution. You just need to use translate3d and z-index to set the order for the initial rendering.
<style>
div {
width: 300px;
height: 150px;
background-color: white;
border: 5px outset gray;
float: left;
margin: 20px;
-webkit-transition: 2s;
}
#element_a {
-webkit-transform: translate3d(0, 0, 50px);
}
#element_b {
-webkit-transform: translate3d(0, 0, 100px);
}
#element_a:hover {
-webkit-transform: translate3d(100px, 0, 60px);
}
#element_b:hover {
-webkit-transform: translate3d(-100px, 0, -60px);
}
</style>
<body>
<div id="element_a">
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
<div id="element_b">
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
</body>
I had this problem on iphone/ios where I had a dropdown menu that overlapped a leafletjs map but was being covered by the map. Noticed that the map had translate3d applied.
Added this to the dropdown element:
transform: translate3d(0,0,0);
...and it is fixed. Thank you stackoverflow people.
Another way around this is that you can create a parent element and apply all other transitions related to it:
# Apply transitions to a parent div
<div>
# This image z-index -1
<img src="foo"/>
# This image z-index -3
<img src="bar"/>
#This image z-index -2
<img src="gg"/>
</div>
JsFiddle