Questions tagged [css-transforms]
CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space
2,502
questions
0
votes
1
answer
20
views
IntersectionObserver and transform: translate unpredictable behaviour
I have the following code, which I'm trying to implement IntersectionObserver to show div's once they're intersecting with the root viewport by translating the divs from 400% to 0. However it produces ...
0
votes
1
answer
33
views
Prevent margin or padding of outer elements from moving absolute element at a fixed position relatively to its parent
I have read questions about the absolute positioning of elements like this or this. I assume that using the transform function is a way to make the element static inside a parent. I did this CSS:
#...
0
votes
0
answers
26
views
The 3D transforms flickering when any ancestor is position: fixed
I have implemented the custom scrollbar based on 3d transforms: https://developer.chrome.com/blog/custom-scrollbar/, however I've noticed flickering behavior of scrollbar's dragger during the scroll.
...
0
votes
0
answers
32
views
Transformed image resizing strangely inside a Bootstrap grid
I'm using a Bootstrap grid to have 3 columns on large screens, two on smaller screens.
Inside the grid I'm displaying products. These products have two images that need to be overlaid. To accomplish ...
0
votes
0
answers
12
views
transform-style attribute not working as inline style in jsx
I am trying to add the following CSS property as inline styles in React, but it doesn't appear on the resulting dom tree element.
Does anyone know if this property is supported as an inline style in ...
0
votes
0
answers
10
views
How to make a image fulfill a div that has a ::after with skew
I want the image to go all over this element, but I can't figure it out on how to accomplish this.
I am trying to achieve this layout:
Desired design
But right now, I am stuck at this point:
Actual ...
0
votes
1
answer
44
views
Difference between transition: scale VS transition: transform VS transition: all
I am applying multiple transform functions - scale() and translate() - in CSS and want to apply transition to only scale property, so I tried the following code block below:
input:focus + label, input:...
0
votes
0
answers
15
views
Simulate rotating disc using skew transformation
I'm attempting to simulate the animated rotation of a disc around a central point using skew, translate, and rotate transforms, like seen here:
In this animation (created in OpenSCAD) the viewport is ...
0
votes
2
answers
56
views
Performance issues using css transform rotate in Firefox vs Chrome
I am trying to pinpoint the cause and, if possible find a fix or workaround for a performance issue I am having when updating the transform of about 200 span elements in Firefox.
In Chrome, I am able ...
0
votes
0
answers
19
views
Control elements individually in react-spring?
I have a react component that renders a "conveyer" using react-spring useTransition. Essentially, I keep track of an array of data that grows like this:
[]
[1]
[2, 1] // unshift
[3, 2, 1]
[...
0
votes
0
answers
40
views
Divs with position: sticky have the wrong top after transform: scale
In my Next.js app, I have a component that users can pinch to zoom in or out of.
The problem is that when zooming in or out, the divs with position: sticky and top: 0px are no longer stuck to the top ...
0
votes
0
answers
41
views
Translate property acting differently in Firefox and Chrome?
I have a few elements that I would like to translate on hover. However, while translate() works perfectly in Firefox, it seems that in Chrome the icons simply disappear instead of translating on the y-...
2
votes
3
answers
54
views
Calculating transform CSS params depending on the child's index
I'm trying to get each child of a div translated a different percent:
#letters:nth-child(n){
transition: all 1s ease;
transform: translateX(calc(n*10%));
transition-delay: calc(n*200ms);
}
...
0
votes
1
answer
26
views
I have a div which is customised as a folder icon. On hover it animates. Now I need to trigger the same animation on hover on parent div
I have a div that is customized as a folder icon. On hover, it animates. Now I need to trigger the animation on hover on the parent div. For example, if I hover over folder-div it should animate the ...
0
votes
0
answers
27
views
<Select> dropdown is getting displayed far away from input when using transform: scale on parent Iframe
I have some select dropdown lists in a bootstrap page.
The bootstrap page is displayed inside of an iframe.
When I use the transform:scale CSS property on the iframe, the dropdown list get displayed ...
0
votes
1
answer
29
views
React and CSS: Timing function is not executed correctly
React and CSS make nothing but problems in my experience.
The child-section Todo is supposed to smoothly transition to the side, out of bounds. Instead, it just happens immediately. What to change?
....
1
vote
1
answer
29
views
javascript - Scale and translate image from center of window to fixed position
I am new to javascript and making a tech demo site to teach it to myself. I started by trying to make a splash screen and navbar but have been struggling to have the splash screen image transform ...
0
votes
1
answer
49
views
Div transform scale but only for container (react & tailwind)
I have some code that looks like this:
const [selectedNum, setSelected] = useState(0)
let cards = [
{title: "1", description: "asdf"},{title: "2", description: "...
0
votes
1
answer
62
views
Scale image on scroll, sticky to top
I'm trying to achieve a similar effect to the images on this page: https://sameold.com except I only want the images to scale in the y direction.
I'm currently experimenting with using a scale3d(1, (...
0
votes
1
answer
22
views
translated texts not aligned to baseline
i used translateY to animate the numbers to spin like a slot machine.
$line-height: 19px;
.example {
overflow: hidden;
display: flex;
margin-top: 10px;
}
.room {
height: $line-height;
}
....
0
votes
0
answers
51
views
Label above the input box
EXAMPLE: https://imgur.com/a/jDLedU8 (Only works when i use @)
I have 2 input boxes and an effect that when I click inside the input the label goes up to visualize what I am going to write, when I ...
0
votes
1
answer
44
views
Creating a rounded side of an element using pseudo-element
I need to recreate this as an HTML element. It cannot be an SVG, and there must be text content inside. Preferably, it should be responsive as the element should also resize when the text inside ...
1
vote
0
answers
184
views
Flipping a card in React
I have this component that works, but I want to add the effect of the text staying on the card while it is rotating. Right now when you click on the card, the text disappears, the card rotates, then ...
0
votes
1
answer
45
views
Transform: translateZ only applying after transition has finished
Have I ran into an edge case that causes a rendering bug, or have I written some terrible CSS?
To replicate this, I've written the following demo:
The body element nests a square div that has a span ...
1
vote
1
answer
60
views
How to animate cat's steps with CSS?
I want to imitate cat steps with CSS animation. I'm trying to animate each paw(img element in div container) in the container and make another animation for the container itself from the bottom to the ...
0
votes
1
answer
40
views
Keeping an object's orientation constant while transform: rotate() is applied to it in CSS
I have a little animation of the solar system. I used the CSS transform: rotate(360deg) to revolve the planets around a fixed center point (the sun). When one of the planets, Saturn, revolves around ...
1
vote
0
answers
67
views
Bootstrap tooltip keep position when using a CSS transform animation
I am using bootstrap Vue tooltips. I would like to add a custom CSS animation on the tooltip when it is shown.
However, when I add an animation that uses transform, the tooltip will be shown at the ...
0
votes
2
answers
82
views
rotate() transform not working with particular parameters?
I have a box in the top left corner of a document. I want to rotate it using a transform so that one of its edges is pointing toward the lower right corner of the viewport. Based on my reading of ...
0
votes
0
answers
65
views
CSS: How to apply transition to variable
So I have this spinning crystal that spins at one revolution per 10 seconds, but while the mouse is hovering over it I want the seconds per revolution to gradually ramp down to 5 seconds, ie. spin ...
0
votes
1
answer
157
views
CSS transform-origin not working in safari as expected
I am trying to rotate(spinning) the SVG about its center with transform-origin: center. It works perfectly in Chrome and Firefox and in Safari at 100% zoom. When I tried to zoom-out or zoom-in the ...
0
votes
0
answers
19
views
Why can't the drag image element be scaled
In the code below, the background styles are applied, but the scale transform doesn't work on the overlay. But it's being added to the overlay since the DOM item beside it is scaled down, but the ...
-1
votes
1
answer
26
views
Transition/animation not working if element is before the toggle
I want to animate the visibility of a few elements, and I isolated this code to show that only the elements after the toggle work, not the ones before (the thing I would need): is there any ...
1
vote
1
answer
64
views
JS/CSS Applying CSS transform to an element that is already transformed without losing original transformation
I'm making some cards and movements of them as a starting point for several projects. I have run into a problem when trying to make a card shake. Because the card has already been flipped, when I move ...
-2
votes
2
answers
82
views
Element rotating off-center [closed]
I want to rotate the refresh icon from mdi with transform rotate. Due to the arrow head, the graphic unfortunately does not have its center at the center of the circle which makes the rotation ...
0
votes
1
answer
76
views
Transform: Scale a svg path and centering
I am trying to animate a svg world map since hours. I red several artikels and threads about this topic but nothing is working.
I have a SVG World Map, one of it's paths is called Australia.
<svg ...
0
votes
0
answers
56
views
Flipbox backside buttons not clickable on Safari Mac OS when flipped vertically
It's only flip boxes set to flip vertically that I cant click the links/buttons on the back to navigate/un-flip. If its horizontal links/buttons on the backside of the flip box are clickable. Was a ...
3
votes
1
answer
214
views
How To Split and Align Text Blocks with Animation
In principle, I want to do what is sketched below. The page has two possible states. In the first one, two texts (their length may vary) are centred together as a headline. For the second state, the ...
0
votes
0
answers
22
views
Problem with translating CSS transformation matrix to Pillow
I have a JS code that creates an image using CSS transformation matrix. I'm trying to port it to Python and I get drastically different results. I can't understand why, and how to fix it.
This is ...
0
votes
0
answers
26
views
backface-visibility: hidden hides the entire page
I'm following a tutorial for how to make a flipbook using html. Everything was working fine until I got to the part where we make the paper flip. For some reason "back 1" shows up on my ...
0
votes
0
answers
14
views
How do I use CSS3 transform3d to lazy scroll section of my webpage
In my webpage, I will like the section image under view to lazy scroll while the other section of the page continue to scroll normally, I'm using CSS3 translate3d(0px, 1px, 0px); where I will be ...
0
votes
1
answer
133
views
Animated Netflix watch next button with css mix-blend-mode
I am trying to build an animated Watch Next button with Netflix-like progress fill.
Here is a small demo:
https://jsfiddle.net/j5af2oc0/4/
The problem is with an icon, that "glitches" over ...
0
votes
1
answer
339
views
How to make image fully scrollable after various css transformations (scale AND rotation)
I'm working on implementation simple image viewer component. I need only to be able to rotate and zoom image. However, I met an issue, that after this transformation even appeared scrollbar does not ...
0
votes
0
answers
31
views
How do trigger a transionend event after another transitionend event triggered?
My second transitionend doesnt get triggered at all and my first transitionend gets triggered to early.
I want to let a div transform to the left out of the window and when finished display none and ...
1
vote
1
answer
239
views
Scaled canvas pixelated bug on Safari
I need to scale up and transform a canvas and it works great with the following CSS property on Chrome for example:
canvas {
image-rendering: pixelated;
}
But on Safari (macOS and iOS), it remains ...
2
votes
2
answers
834
views
Swipe hand icon animation with CSS
html { background: #4F4F4F; }
.path {
content: "";
width: 20px;
height: 20px;
position: absolute;
background: rgba(149, 147, 241, 0.5);
border-radius: 40px;
top: 28px;
...
1
vote
0
answers
33
views
Placing an element within scaled + transformed div based on outside cursor position
After four hours of head-scratching, I think I need some help. Will try to explain it as well as possible.
I'm trying to place a pin on a map that can be zoomed in and moved around.
The scaling ...
1
vote
1
answer
764
views
How to animate height with transform without squishing content
In my project I have been using jQuery slideUp() to slide up an element in a 200 item list when the user clicks a button. But, as everyone knows, animating CSS height requires a reflow, making the ...
0
votes
0
answers
20
views
how to calculate the easing for counter scaling nested elements
I want to scale an element with a child element and make it look like the child is not affected by the scaling.
The counter scaling can be done by 1/parentScale, which is fine for the start and end ...
1
vote
0
answers
52
views
How to force step order on css animation?
I have this small code working good:
#image {
height: 32px;
width: 32px;
background: url('./media/man.png') 32px 0px;
animation: autoRotate 1s steps(4) infinite;
transform: scale(5);
...
0
votes
1
answer
88
views
how to center a div between two percentages of a css pie chart (conic-gradient)
I'm trying to create a pie charts using css conic-gradient, but can't figure out how to center label of a particular color to display at the center of two percentages while keeping the proper radius ...