I am stuck on defining an css3 cube completely with percent.
Here a short example in Codepen
http://codepen.io/anon/pen/detAB
As you can see the cube faces have 100% width and height of its parent element, which works perfect. Now i am trying to translate the bottom face 50% down and 50% back.
with pixel values this is no problem
transform: rotateX(-90deg) translateZ(50px) translateY(50px);
but with percent nothing happens
transform: rotateX(-90deg) translateZ(50%) translateY(50%);
is there any other way? or am I missing something?
The percentage there is not of the parent container in the way you might expect but of the element itself. The spec describes it as:
[The percentage] refer[s] to the size of the element's box
Regarding %s, the spec says:
Note that values are not allowed in the translateZ
translation-value, and if present will cause the propery value to be
invalid.
Though, it seems that instead, they aren't valid in any of them for Chrome at least.
Sorry :(
The best I've found is by doing a bit of javascript.
Instead of using the translateZ() value, I've used the transform-origin: x y z for the axis to be at the center of the cube.
The point is that the cube can turn on its center (and not turn on a center of the main face and translate z...)
Here is the jQuery function (eventually to apply on $(document).ready() and $(window).resize()) :
function get50() {
var half_width = $('#front').width() / 2;
$('#front').css({
transformOrigin : '50% 50% -' + half_width + 'px'
});
}
You can see a DEMO here...
Related
URL: https://www.royalsmushicafe.dk/
I have issues with the left side menu text looking blurry on mouseover. It's as if it's blurry during the animation and turns crisp again only after the animation is over. In Safari it stays blurry.
I'm using Transform: scale(1.2) and -webkit-font-smoothing: subpixel-antialiased;, but have tried quite a lot of suggested solutions.
I've been browsing StackOverflow and Google without luck, with suggestions like using transform perspective(1px), scale3d, translate3d( 0, 0, 0), backface-visibility: hidden even filter: blur(0) and whatnot – nothing has resulted in the expected behaviour of a crisp text scaling on mouseover :(
Any help would be much appreciated
I've just had almost the exact same problem, and found all the same hack ideas for perspective(1px), backface-visibility: hidden, and so on, with no success. Chrome and Firefox are fine, but scaled-up text blurs horribly in Safari. For anyone else experiencing this, the band-aid solution is to scale down instead of up.
In my case, I have a label that moves and changes scale when the input has content:
label {
will-change: transform, color;
transform: translate3d(0,0,0);
transform-origin: top left;
height: 20px;
}
input:placeholder-shown:not(:focus) + label {
transform: translate3d(0,.6rem,0) scale3d(1.5,1.5,1);
}
Idea here is that the label has the same styles if the input is focused or has content, and is bigger if the input is empty and unfocused (hence the funky pseudoclass selector.)
The problem is that using transform like this triggers GPU compositing on the <label>. When this happens, the composited layer is rendered like a bitmap in the GPU, at the dimensions calculated during CSS layout (20px here). Then, the GPU layer is scaled up (in this case by 1.5x, so it's now 30px high, and blurry).
Chrome and Firefox seem to re-render the layer at final scale which un-blurs it. Safari does not, probably to save memory since the composited layer is dimensionally smaller (20px high instead of 30px).
To make it work better, I opted to scale down:
label {
will-change: transform, color;
/* reverse the scaling ratio */
transform: translate3d(0,0,0) scale3d(0.67, 0.67, 1);
transform-origin: top left;
height: 20px;
}
input:placeholder-shown:not(:focus) + label {
/* reset to scale of 1 */
transform: translate3d(0,.6rem,0) scale3d(1,1,1);
}
The scaled-down text is a tiny bit blurry, but much less noticeably. I might try different -webkit-font-smoothing values, although I don't hold out a lot of hope because of the way GPU rendering works. Scaling ratios that resolve to a clean, integer pixel font size will probably work better, too.
Would backface-visibility: hidden; help? I recall having similar problems and it did help.
I have apparent gaps in my CSS experience. While I can easily apply and extend what I do know, I'm missing the terms to even search for what I don't know.
So, I've taken parts of Animation.css and applied them, but I don't know how to constrain the bounds of animations like bounceInUp. When the animation happens, the transition seems to have no bounds. I'd like to constrain the bounds of the animation so that it starts and finishes inside its container.
What am I trying to do here? Constrain the bounds, clip the animation, mask it? I've been digging and haven't found what I'm looking for yet.
The best solution I've found is to set the starting position in the CSS's translate3d(). Not sure if that is the "right" way, but it has the right effect for me. I'm not sure what I was expecting to find; however, I don't particularly like this approach because I'll have to tweak the animation CSS based on the size of the container element. I'd prefer to just code the CSS solution once and freely resize containers.
#keyframes bounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
/* Set the y length(?) / offset position */
transform: translate3d(0, 300px, 0);
}
}
I wanted to draw a curved animation and after a lot of doing monkey coding I get the desired result. But I'm stuck how does this work!
Look this picture: demo
Now look this picture too: demo
I got the desired animation that is curved animation after just removing left: 50px; from 50% keyframes
But, I wanted to know how this is becoming curved as it's initial position is left: 50px;, not? Even if I don't place the left value it should go like previous but amazingly it's curving. So anyone have some idea about this?
From MDN - #keyframes
When properties are left out of some keyframes
Any properties that you don't specify in every keyframe are interpolated
And it seems the values are interpolated midway from the current to the next given value, using the animation-timing-function, which is ease in your case.
When you change the timing function to linear for example, you get a straight line
#ball {
animation-timing-function: linear;
}
See modified JSFiddle
Finally I got it now that how this works.
When one property is left(i.e. removed) then it's value is increased accordingly.
Example:
0%{bottom: 0%; left:0%;}
50%{bottom: 0%;}/*the left property is left(removed)*/
100%{bottom: 100%; left: 100%;}
In the above code the value of left in 50% is initial(animation from 0%) = 0% and end point (animation to 100%) = 100%.
So here the bottom value will be the same defined in 50% keyframe but the value of left will increase accordingly that is
from 0% to 1%, 2%, 3%, 4%, and so on. Likewise, if you left(remove) the bottom property and keep(add) left property then it
will increase the value of bottom accordingly.
See this demo to make your concept clearer.
Hence the demonstration in the question is being viewed curved.
By the way of this concept I've made a demo to make a circular animation also.
P/s: the animation-timing-function rather than ease works differently.
Try this yourslef::demo by changing the value from ease to anything you want such as ease-in-out.
let's say i have a parent container which is set to
-webkit-transform: perspective(300px) rotateX(45deg);
-webkit-transform-origin: 50% 100% 0%;
and inside it is a number of items in which i don't want to have that styling.
what do i have to do? set its transform values to 0? like
-webkit-transform: perspective(0px) rotateX(0deg);
-webkit-transform-origin: 0% 0% 0%;
i have a sample jsfiddle here : http://jsfiddle.net/8cUPL/1/
The transform-* properties, like opacity and some other rendering-related ones, don't 'inherit' in CSS meaning of inheritance. Instead, they apply the visual changes to the element as a whole, including all its descendants. Applying something like transform: none; to these descendants doesn't have any visible effect, it means only that these elements are not transformed by themselves, but they still are transformed with the parent element — not because they 'inherit' its style, but because they are parts of its appearance.
The only way to visually 'undo' the transform of the parent element for a descendant (i.e. make it look as non-transformed) is to specifically transform it so that the result of this transform would look from the given perspective the same as it would look without transform at all. To make this possible, the transformed element itself and all intermediate ancestors of the given element must have transform-style: preserve-3d. The needed 'compensating' transform can be calculated from the resulting 3D scene or just be constructed by adjusting transform values through trial and error, e.g.
.items{
...
transform: translate3d(-51px, 11px, 29px) rotateX(-45deg);
transform-origin: 50% 100% 0px;
}
(see JSfiddle).
Unfortunately, this workaround is not compatible with overlow:hidden because it (along with some other properties) effectively removes transform-style: preserve-3d. So, if you need to clip the overflowed parts of the transformed element and to 'undo' the transform of its part in the same time, the only solution suitable for you would be to organize the code so that this part would not be the descendant of the transformed element anymore.
You mean you want the items to behave as if they are not part of the perspectived container at all? No, that is not possible.
You can, however, use a bit of Javascript to take the items of out the container and put them elsewhere in the DOM tree. Then they will be free of the perspective.
var container = document.getElementById('container');
var items = container.getElementsByClassName('items');
for (var i = items.length-1; i>=0; --i) {
var el = items[i].cloneNode(true);
var itemparent = items[i].parentNode;
itemparent.removeChild(items[i]);
container.parentNode.insertBefore(el, container);
}
Fiddle
The perspective and its -origin don't actually do anything on their own.
To remove the transform of a child element just reset its transform like so:
transform: none;
Fiddle
Basically, instead of just the basic rotateY(180deg) method, I'm trying to combine it with a translateX transform so that the card looks like it's actually being picked up from the right side (left when flipping back) and then being laid back down on the "table" in its new orientation.
As you can see in the Fiddle, it has the right general motion, but for some reason the two faces are not in sync. I'm not sure what I'm doing wrong - I guess I'm just not spacial-geometrically incined XD
Any help sorting this animation out would be much appreciated!
I think that this is what you want:
updated fiddle
The trick is that the background needs another transform origin:
#tcb {
background:#030;
transform:translateX(-100%) rotateY(180deg);
-webkit-transform:translateX(-100%) rotateY(180deg);
z-index:0;
transform-origin:100% 50%;
-webkit-transform-origin:100% 50%;
}
The reason is that the angle of rotation is reversed, so that you need to flip it around the other border. (So, the origin at 100%). And now that you have changed, that, you need to readjust the offset (the translateX value)
I needed also to move the transform-origin for the foreground from the div (where it was set both for foreground and background) to the foreground div.