2,529 questions
2
votes
1
answer
53
views
Scale function in Firefox
I'm working on a tiled layout where I want the tiles to randomly zoom to double size. This works fine in Chromium like browser but not in Firefox.
What works in most browser is:
scale: 2;
What does ...
- 3,100
0
votes
1
answer
34
views
Center div in div on Safari
A friend of mine tested my oxitania.eu website on his Mac by Safari, and he sent me a screenshot that in my .frame-circle div, the .taglinks div and downer the .more-txt div are not in the middle of ...
- 754
1
vote
1
answer
59
views
Is there a workaround for dragging elements affected by ancestor transform on Safari?
On Safari, the drag image of draggable elements affected by transform on an ancestor element is not visible. Is there a workaround for this while still keeping the transform on the ancestor element?
I ...
- 11
0
votes
0
answers
68
views
Why Do Transformed Child Elements Show Bounding Box Offsets in Chrome?
When an element has a transformation applied, its child elements will have different computed values (e.g., from getBoundingClientRect()) compared to what is actually rendered on the screen. This ...
- 445
1
vote
1
answer
79
views
Nested CSS transform fails on Firefox
I try to have an CSS animated Book in an parallax scroll effect in the header.
Both use CSS 3D transformation. This works fine in Chromium based browsers but not in Firefox.
Removing following ...
- 1,191
1
vote
1
answer
94
views
Why does Safari OSX not rendering 3d CSS rotate correctly?
I have this code of an animating, rotating cube made with CSS. The Code works on Chrome and Firefox, also on iOS Safari it's working but not on Safari OSX. On Safari only two sides are rendered...
Is ...
2
votes
1
answer
130
views
Why is my rotating flip card breaking when I apply clip paths?
I created a flipping card here with a parent container that provides a box shadow: https://codepen.io/andresexton/pen/wBvxOrP?editors=0100
I need to apply clip paths where shown in the code (hidden ...
- 33
2
votes
1
answer
77
views
DIV flickering during transition when under Navigation Bar
const flipCards = document.querySelectorAll('.flip-card');
const viewMoreButtons = document.querySelectorAll('#view-more-details-button');
const viewSummaryButtons = document.querySelectorAll('#view-...
- 270
1
vote
1
answer
55
views
Rotated/Flipped DayGrid view of a single week
In fullcalendar it is possible to create a dayGrid view with a single week with the following settings
views: {
dayGridOneWeek: {
type: 'dayGrid',
duration: { weeks: 1 }
}
}, ...
- 21
0
votes
0
answers
32
views
Why does my IntersectionObserver trigger too often in a 3D transform container, but not in a 2D transform container?
I'm playing around with IntersectionObserver in two different scrolling containers: one uses a 3D perspective transform, and the other uses a simpler 2D transform.
For the 3D container, the observer ...
- 7,558
0
votes
0
answers
36
views
Adjust box size of scaled element
Is there a way to make this scaled box only take up the height of the scaled result?
div {
width: 200px;
height: 50px;
background-color: DeepSkyBlue;
}
.scaled {
transform: scale(0.5);
}
...
- 769
0
votes
0
answers
27
views
Resizing a div that has a transform: how to play with the top/left/width properties such that it remains in one place?
I am trying to make my shape stay in place when performing a resize. Unfortunately, the following code:
element.style.left =
initialPositionsTransformed.originalXPosition -
Math.abs(...
0
votes
1
answer
177
views
Is it possible to create stacked (nested) 3D transforms with CSS?
I'm learning 3D transforms, playing around with building some interactive 3D models with CSS. Here's a codepen outlining a basic example. In the "sibling" layout, the result is as expected. ...
0
votes
1
answer
53
views
How can I compose multiple CSS animations/properties that all use transform?
Say I have a spinning animation that looks like this:
@keyframes spinning {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
I can use it like this:
.spinning {
...
- 3,290
1
vote
1
answer
78
views
How to make square into triangle by matrix3d?
How can I turn a square into a triangle with a matrix3d transformation?
Expected:
enter image description here
For example, a trapezoid obtained from a square usign matrix3d:
.trapezoid {
width: ...
- 13
1
vote
0
answers
114
views
Using 3D CSS transforms on large background elements breaks scrolling overflow in Chromium browsers
I'm designing a website that takes advantage of the CSS transform3D feature which allows me to position divs in 3D space with hardware-accelerated 3D transformation such as perspective and scaling. I ...
- 129
0
votes
1
answer
135
views
Scale canvas/matrix and all transformations applied, to obtain better quality image in the canvas
A member from stackoferflow helped fix my script and he obtained a good result, but I still need some help.
I have a DIV that contains some other divs and in the end, an image.
This image is bigger in ...
- 255
1
vote
0
answers
97
views
transform-origin applied to a <clipPath> is wrong on retina displays
Context:
I'm trying to reveal an element on page scroll using the shape of a "blob" with a CSS animation-timeline animation so the code must be tested on a recent Edge or Chrome browser.
The ...
- 124k
1
vote
1
answer
154
views
Set an element's transform-origin based on the viewport in CSS
I have many elements positioned automatically around a page in various ways. I want to be able to transform each of them individually (not using a shared parent) with the center of transformation at ...
- 11
6
votes
3
answers
382
views
How to grow an isometric rectangular box properly with HTML and CSS?
It is convenient for isometric grids to start at the top like this:
I have the following code to draw a "3d" isometric box:
body {
display: flex;
justify-content: center;
align-...
- 12k
1
vote
0
answers
226
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,601
-1
votes
1
answer
38
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;
...
- 11
2
votes
1
answer
166
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 ...
- 617
0
votes
1
answer
60
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
1
answer
102
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....
- 21.1k
0
votes
1
answer
40
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
130
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 ...
- 141
0
votes
2
answers
74
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
34
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 ...
- 201
1
vote
1
answer
94
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 ...
- 41
-1
votes
1
answer
128
views
Flickering text on css transform scale
people. I`m new to this, and I have an issue with some text flickering when I try to scale the div up. Can, please, somebody look at my case at help me with a solution to this? Thanks in advance! The ...
0
votes
1
answer
78
views
CSS rotating image gallery with react taking two button clicks when it should take one
I have a rotating image gallery using react and CSS. It works except every time I click the button to rotate forward or backward it takes two clicks to start working correctly. For instance the first ...
- 133
0
votes
1
answer
388
views
css skew element and keep max-width
If I distort a container with the skew property, then the short corners are inside the original dimensions and the long corners are outside.
This can be seen in diagram 1 with the blue box.
diagram 1 :...
- 1
-1
votes
1
answer
134
views
Website animated elements disappearing in mobile view
Some of my elements are animated and they use some JS to detect when being viewed.
In desktop view they work fine, but when in mobile they completely disappear, except for one.
The reason why they ...
- 1
-1
votes
1
answer
55
views
recreating interactive workspace in react. How to migrate?
So I originally created a program that allows an interactive workspace that allows users to drag around the page and move everything inside the container with it using pure JavaScript. code is as ...
0
votes
1
answer
131
views
Multiple overlapping svg paths create unwanted effect
I have created a tree-like structure of cards with lines between parents and children. The lines are svg paths like so:
const newpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
...
- 909
1
vote
1
answer
49
views
Resolving CSS transforms creating it's own container for full screen modal
I have a web-component modal that opens within a div that contains a transform however the modal itself opens within the container of the transform and not the viewport of the page. It is not possible ...
- 31
0
votes
0
answers
336
views
HTML Transformation Limitations: "iOS Alarm Clock"-like Animation
For my website, I wanted to achieve an effect inspired by the Apple iOS alarm clock animation:
More specific, the effects I want to achieve are:
Styling according to screen position (same style on ...
- 139
1
vote
1
answer
64
views
How to properly transition when reflecting an element with d3?
I have a path element that I am updating with new data. It is then repositioned and also reflected. All of that is working correctly. The part that is not working correctly is the transition. Due to ...
- 85
0
votes
1
answer
307
views
how to manage z-index on carousel elements?
I want to create a infinite carousel, with the top-left picture sliding to the right-end of the list of elements, passing behind the others.
My problem is the transformX, which creates a new stack for ...
0
votes
1
answer
168
views
How to prevent edges anti-aliasing on element with css transform in Chrome
I have absolutely positioned blocks which are centered using transformation:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
I noticed that Chrome applies some sort of antialiasing on such ...
1
vote
1
answer
465
views
Position of element following cursor offset by container content
I am trying to create a drag and drop feature that is a child component within a modal where the currently dragged item follows the position of the mouse, however, the position of the mouse is being ...
1
vote
1
answer
52
views
Firefox jumpiness involving CSS scale and canvas
In Firefox (121.0b9), when scaling canvas elements, I notice slight jitteriness. I don't experience this in Safari or Chromium. Is there a way to work around this in Firefox?
Here's an example (...
- 717
-1
votes
2
answers
108
views
How to rotate image in an ellipse?
I am trying to make an ellipse containing an image, which has a border.
I am getting almost there, however I want to rotate the image independently,
so that can bring it back to it's original position....
- 21
0
votes
0
answers
235
views
CSS mix-blend-mode breaks when translating parent element
I'm encountering an issue with CSS mix-blend-mode, where the mix-blend-mode is lost when I apply a translation transformation to the parent element. I'm seeking a solution to maintain the mix blend ...
- 243
-1
votes
1
answer
240
views
CSS - Realign content (remove white space) after transform: scale
So far I found only very complex or very "hacky" solution for the issue below:
What I have before transform
.element1 {
height: 100px;
width: 100px;
background-color: red;
}
....
- 23.1k
2
votes
2
answers
148
views
small ball rotation animation inside the bigger ball
I want to rotate the ball inside the circle so it touches every corner of the bigger circle and animation continuous infinitely as it is a logo animation.
body {
background-color: #272727;
...
- 45
0
votes
1
answer
143
views
Why is the transition not working when I am adding the element?
I am creating an element each time when the function is called, but the transition is not always working. I wanted a message coming from the top of the screen but it is adding the element instantly ...
0
votes
1
answer
71
views
Why does my sliding component toggle have a gap?
Currently i have the component working like in the added .gif, with the yellow gap.
I need component 1 and 2 to move without gap.
I cant figure out why the yellow background becomes visible during the ...
- 133
0
votes
0
answers
142
views
scale3d causes iOS Safari to crash
We've been building a 3D product preview that purely relies on HTML and CSS. That means there is a lot of CSS for 3D translation, 3D scaling and even some transitions going on. We just now realized, ...
