Questions tagged [css-transforms]

CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space

Filter by
Sorted by
Tagged with
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 ...
Ameen Shamsan's user avatar
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: #...
Hitokage's user avatar
  • 745
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. ...
marsielko's user avatar
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 ...
Colin 't Hart's user avatar
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 ...
atri's user avatar
  • 91
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 ...
Jonathan Yont's user avatar
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:...
backtosqaure1's user avatar
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 ...
Andy Bayer's user avatar
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 ...
EpzEpzEpz's user avatar
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] [...
Aaron Parisi's user avatar
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 ...
tarkovsky's user avatar
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-...
rat182's user avatar
  • 71
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); } ...
Malvinka's user avatar
  • 1,195
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 ...
Sunjid Shibly's user avatar
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 ...
StupidDoofus's user avatar
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? ....
marian's user avatar
  • 27
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 ...
Adam Cockell's user avatar
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: "...
Codeitfast's user avatar
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, (...
Birk Marcus's user avatar
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; } ....
HODU's user avatar
  • 23
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 ...
user avatar
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 ...
Sigurd Mazanti's user avatar
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 ...
Amelia W's user avatar
  • 103
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 ...
Vlad Solomon's user avatar
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 ...
ilikhachev42's user avatar
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 ...
Mir's user avatar
  • 37
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 ...
Dennis's user avatar
  • 3,054
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 ...
recursive's user avatar
  • 84.1k
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 ...
halsemarathmellsphv's user avatar
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 ...
Muthu's user avatar
  • 1
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 ...
wongz's user avatar
  • 3,405
-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 ...
Andrea's user avatar
  • 555
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 ...
Peter H's user avatar
  • 13
-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 ...
Fred's user avatar
  • 1,144
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 ...
Louis Eiden's user avatar
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 ...
Scotosaurus's user avatar
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 ...
mathbreaker's user avatar
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 ...
complynx's user avatar
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 ...
mfeldbauer's user avatar
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 ...
Eliasu 's user avatar
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 ...
Michał Lach's user avatar
  • 1,291
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 ...
ReynardTheFox's user avatar
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 ...
Batcha's user avatar
  • 1
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 ...
Kalane's user avatar
  • 59
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; ...
Denees's user avatar
  • 9,120
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 ...
Moseleyi's user avatar
  • 2,603
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 ...
cytek04's user avatar
  • 482
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 ...
Lucas's user avatar
  • 1
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); ...
ferter3006's user avatar
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 ...
Aamir Siddique's user avatar

1
2 3 4 5
51