Questions tagged [css-transforms]
CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space
css-transforms
2,530
questions
0
votes
0
answers
35
views
How to scale an image on hover without messing with other elements, while also respecting max-width, using only CSS?
I'm trying to add zoom on hover to some images. The entire images should be viewable while zoomed in.
First I tried classic scale transformation, but it doesn't work well with smaller devices like ...
- 1,399
-1
votes
0
answers
19
views
make a delay for the before element to rotate after the main div [closed]
i wan't to do the second exercice of css with pure css and just one div
is that possible ?
the exercice is in this page https://elzero.org/css-assignments-lesson-from-74-to-77/
i tried to do animation-...
- 1
-1
votes
1
answer
28
views
The card item in CSS isn't flipping as expected when used backface-visibility property
There's the HTML code:
section {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card-item__side {
border: 1px solid black;
...
- 19
-2
votes
0
answers
18
views
applying rotate to an element changes every other transform values in getComputedStyle and matrix
I'm trying to get the transform values from my element in js using getComputedStyle and DOMMatrixReadOnly. everything is fine until I add a rotate transform to that element. then every other transform ...
1
vote
1
answer
79
views
3D CSS3 transforms handling with DOMMatrix issue
Context
I'm trying to handle geometric operations applied to HTML elements by CSS3 3d transforms through DOMMatrix API to retrieve any coord i want in any coord system i want.
The Issue
Everything ...
- 591
0
votes
1
answer
41
views
Convert SVG to canvas PNG remove transform3d on ios
Im trying to load an svg to canvas and it works great on chrome and firefox but it mess's up on webkit. I tried changing where the 3d transform but to no avail. Anyone have any experience or ...
- 15
0
votes
0
answers
12
views
How can I get the correct positional values such as x/y, left/top from a DIV that had a transform applied?
I have a simple resizable box. When I mousemove, it adds the offset (the amount of pixels, as per my movement) to the width, and we call it a day. This works, the resizable box resizes as it should, ...
- 5
0
votes
1
answer
22
views
How to fill the screen when using transform: scale on <body>, instead of centering it on the screen with whitespace around it?
I would like to use the following code to zoom the page to 65%, but it does not work on Safari for iOS:
body {
zoom: 0.65;
}
So instead I am using this code:
body {
-webkit-transform: scale(0....
- 20.7k
0
votes
1
answer
22
views
Safari and Firefox flashcard using grid and transform unable to have overflow scroll
I got a very particular issue creating flash cards using css grid and transform.
I need to make the content overflow: scroll.
And in the case of Chrome it works as expected. Both sides of the flash ...
- 697
0
votes
1
answer
42
views
Block Smooth Transition
I have this codepen
https://codepen.io/sirlouen/pen/rNbdGmB
After trying on multiple ways, I cannot figure out how to make the block transition smoothly from bottom to top, instead of popping ...
- 134
0
votes
0
answers
23
views
Is it possible when using the css transform property to delay only one value and not the other using transition-delay [duplicate]
I have written the following code in order to animate a hamburger menu using css and a bit of javascript. However, I intend for the animation to work as follows. First, I want the top and bottom line ...
0
votes
2
answers
43
views
Unable to click and hover on buttons through Overlay
The overlay is used to move the text upwards and reveal buttons but I cannot put hover or click on those buttons because as soon as I go over them the overlay and text comes down making it unable for ...
- 5
0
votes
1
answer
27
views
rotateY() with perspective not rendering correctly on WebKit
Problem
I'm trying to do a simple animation using rotateY() and perspective. It's working fine on Chromium, but not working on mobile Safari and Chrome. I'm not sure if this is a WebKit bug, if there ...
- 151
1
vote
1
answer
60
views
CSS3 animation is different in Chrome and Safari browser
I am trying to create a 3D hover animation effect for a site and it works just fine in Chrome based browsers, since in the development phase it was written with the help of Chrome's inspect tool, but ...
- 13
0
votes
0
answers
11
views
Elements on page flicker with webkit-transform after the background video plays
The elements on the page start to flicker after the background video plays.
The website is: https://hydrovyn.com
Here is a screen-capture I took of this happening: https://youtu.be/oQQrT-f4EIA?si=...
