As you can see at the top part of the picture, there is a css line given to the element itself -> transform: translate3d(681px, 407px, 0px);
I would like to add a property scale to the transform but it just overwrites the translate3d
I know I can put these 2 after eachother like this: transform: translate3d(681px, 407px, 0px) scale(2); But I can't use this as the number in translate3d are random and there is no way for me of knowing them.
Is there any way I can still use the scale property without ruining the translate3d ?
That's sadly not possible using the transform property.
But you can use the standalone scale property for this, once it is supported by all major browsers. Browser support is really poor at the moment.
https://caniuse.com/mdn-css_properties_scale
Related
Heei. I just trying to use transform: translateZ(value);. When I try like this https://codepen.io/bariq_dharmawan/pen/yEPaxw
I confused why translateZ(0px) still make something change on the element. Please, I need some explaination
On image above, the transparancy of background-color looks like reduced when I hover. I don't know why
I'm experiencing a weird issue which seems to be due to bad pixel rounding when using transforms with a percentage.
Basically, I have a column structure, and the inside of the column has a width equal to 200% of the column itself. I want to then use a transform to toggle the inside of the column to the left, to show the right side of it, by using transform: translateX(-50%)
You can see a simplified example here
The issue is however, that depending on the width of the viewport (try resizing the frame), a 1 pixel whitespace is shown for some of the columns. This happens in Chrome, Safari and Firefox.
Does anyone have any idea of how to fix this?
Edit: I'm aware that I can "fix" the issue by adjusting the transform value, or the width of the items, but that's not really ideal, and I'm hoping there's a proper way to fix it.
It's caused because of transform: translate property miscalculation in browsers. Usually by changing object size, padding or margin by 1 or 2 pixels fixes this issue.
Try using width: calc(200% + 2px); for element with transform property.
transform: translateX(-49%); seems to fix it
I've got an element which i'm trying to animate in. I want to do the animation in two steps, first scale and rotate a square in, and then widen the square. I start off by transform: scale(.1) rotateX(360deg); and animate to transform: none, which works well. But as soon as i (in any step) declare a height/width in the keyframes, the rotation stops working. It will still scale as it should, and the height/width properties are applied, but the rotation is skipped entirely.
Here is a Codepen to demonstrate the issue:
http://codepen.io/anon/pen/abDCK
As you see, there's no rotation going on in there, it just simply scales in. Now, scroll down in the CSS and comment out the height/width properties, and you'll see that the rotation now suddenly works.
I've tried different combinations of having/not having height/width declared in the normal selector (not in the keyframe), i've also tried putting the height/width declarations in different steps in the keyframes. No success.
I get the same result in both Firefox in Chrome. Is this the intended behaviour? If so, why? Are there any workarounds?
Something to do with the transforms in the keyframes not being balanced?. You need to add translateX(0deg) to either the 40% keyframe, of 100% keyframe, depending on where you want it.
http://codepen.io/anon/pen/lJKkD
I'd sure love it if somebody could explain the reason - but this is the "solution"
I am trying to apply a Minecraft-like style to a div element. The end result should look something like the "if not ok then return end" message:
Quick sidenote: For those of you who haven't played the game, a random line from a specific file is read and it's contents are displayed as the message of the day. It throbs in and out and grabs your attention.
The text shadow, font, and throbbing animation has already been done. However, when I try to apply the second animation, it overrides the throbbing animation (meaning it does not throb, but is rotated)
My CSS is as follows:
#random-message {
/* font/text stuff */
animation:minecraft, minecraft-rotate 0.5s infinite;
-webkit-animation:minecraft 0.5s infinite; /* Safari and Chrome */
}
The animation minecraft applies a transform: scale effect, and minecraft-rotate applies a transform: rotate effect.
What would be the best way to implement a rotation effect without overriding my throbbing effect?
You don't want to have a rotation animation...you want to rotate the div. Simply add transform: rotate(340deg); line to the css block.
Any given element can have only one transform at any given time. Any attempt to set at the same time 2 transforms will result in one of them being overriden.
You can:
1) set two divs, one inside the other, and apply a different transform to the parent and to the child.
2) build the composite transform. In the case of an animation, that means creating composite transforms for each frame.
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;