I've included an inline svg in the html. My goal is to identify the individual stars and apply a "twinkle" effect as a keyframe.
I noticed there are inline style attributes for its transform properties.
I changed the transform-origin of the individual star, #star to transform-origin: 50% 50% and added a transform: scale(1.2), just to test a simple scaling effect.
For some reason, I don't see the transform being applied when I hover over #star element. The star disappears on hover.
Heres a link to my codepen
Apply the transform:scale() to #star:hover polygon this should change the size of the polygons within the group.
#star:hover polygon{
transform: scale(1.2)
}
CODEPEN
I am using the css properties perspective and transform to create a 3D world in html. In Google Chrome everything works without problems, but in Microsoft Edge there is something buggy in it... I narrowed it down using this jsfiddle: https://jsfiddle.net/uke8bsvk/12/
The third variant in the fiddle is where it goes wrong. It is working fine in Google Chrome, but in Microsoft Edge somehow the red div does not respond well to hovering it with the mouse by changing its color to green. It only responds to hovering it with the mouse close to the bottom of the red div.
In the fourth variant I removed transform-style: preserve-3d for the red div and everything works fine again.
Does anyone have an idea what's going on here and how to solve it?
PS. In my real case, I sometimes have a child div for which preserving 3d is necessary and sometimes I do not have a child div. It is not really an option to use the obvious dirty work around of setting and removing transform-style: preserve-3d dependent on the presence of a child div.
I found a relatively clean trick/work around to 'solve' the problem: just add an extra child div, make it invisible and rotate it out of plane with transform: rotateX( 1deg ). See jsfiddle: https://jsfiddle.net/uke8bsvk/13/
You need to prefix the 3d properties in your css, using Autoprefixer. You can do it on the site itself or add it as an extension to your code editor of choice.
It will add some of these prefixes to your code as so:
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotateX( 30deg );
transform: rotateX( 30deg );
background: red;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
Here is an updated Fiddle.
You should prefix each and every one of your projects for the web.
-webkit-transform: perspective(500) rotateY(13deg);
-webkit-transform-origin: 0% 45%;
DIV is left side position.
i just want to know how to place it right side(opposite)?
The code you provided will produce something that behaves like this JSFiddle.
Typically, the CSS3 transform property is used to rotate, scale, are move an element about a point. To move an element to the right of the page, like what I think you are describing, you should just simply float the element to the right or use the margin property instead.
div {
float: right;
}
This source discusses all the various CSS3 transform functions. The most common are:
translate(x,y)
scale(x,y)
rotate(angle)
skew(x-angle,y-angle)
These would not 'move' an element to the right side of the page like you are describing.
I am moving some element from (browser height + element height)px towards the top of the browser at -50px of the browser using CSS keyframes and that works but the problem is it's lagging and I am well aware that using translateY would resolve this issue.
Now assume I have a CSS as follows.
.bubble
{
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.bubble.move
{
-webkit-transform: translateY(-50px);
}
As the element is below the browser screen (browser height + element height)px and I want it to move at the top of the screen at -50px, that doesn't work. It just moves the element from its current position to the -50px of that current position which is not intended. How can I ask transitions to go at -50px of the browser and not he element?
Translate isn't what you're looking for. You want to position the element absolutely and put the transition on the top property. Something like:
.bubble {
position:absolute;
top:100%;
transition:top 1s ease-in-out;
}
.bubble.move {
top:50px;
}
Only bad part about this approach is that the body will need to be the relative parent of the .bubble. I left out vendor prefixes because I hate them.
Have you tried positioning the element absolutely instead of relatively?
Use javascript to calculate it and set the css using javascript too
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