Questions tagged [css-transforms]
CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space
2,415
questions
0
votes
1
answer
25
views
Why transform-origin property is not working?
I have a mini-question concerning the return value of transform-origin in javascript :
I have a simple div with a transform-origin set to 0 0 via CSS and i'm trying to console.log() the div.style....
0
votes
1
answer
22
views
How to scale div content but not div itself and make it work with position: sticky elements?
Here's the basic layout I need to scale:
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f0f0f0;
overflow: auto;
}
.sticky-row-header {
...
-1
votes
0
answers
25
views
How to move the slider [closed]
I have been working on the slider for a few days and I don't understand something
That is when the mouse is pressed and dragged to the right, what happens when the slide moves
The method I used:
When ...
1
vote
0
answers
33
views
CSS scale on child element prevents scrolling up and left
I have implemented a zoom to cursor position for a child element of a container.
While the zoom to cursor functions as expected, once the child element is scaled higher than 1, I can no longer scroll ...
1
vote
5
answers
57
views
Vertical line below rotated text
I wanted to have a vertical line below a rotated text, but the behaviour I am attaining with my code is that the line starts at the center of the text.
.email {
display: flex;
flex-direction: ...
0
votes
1
answer
42
views
Chrome cuts off div when scaled down, despite overflow:auto and content visible before scroll
I have a weird issue with Chrome (it works as expected with Safari and Firefox). When a div exceeds a certain size, it is being cut off when transformed and scaled down (via a wheel event handler). ...
0
votes
0
answers
14
views
Rubix cube - Splitting when rotated - losing origin positioning
I have a rubix cube made up of 27smaller cubes or cubies. I have rotations in place that will rotate each face of 9 cubies when rotated 90' left or right on each axis, x,y,z, depending on the move. ...
0
votes
1
answer
71
views
Flipping the styled container
This is the pen I am working on and I want to create something more interesting for my portfolio, but I've stuck on the part when I want to have the same elements on the right side of the screen doing ...
0
votes
0
answers
35
views
Blurry text using CSS transform: scale() and transalteZ()
I am creating a parallax effect in pure CSS, so I needed to apply the following styles to a div that contains some images and text:
transform: translateZ(0.2px) scale(0.8);
my text gets blurry.
Most ...
2
votes
1
answer
38
views
positioning a rotated 90deg element isn't responsive
I have this project, with this navbar
like you see I am using flexbox, and it is correctly viewed.
but they tell me that I need that the navbar is rotated, and the text be viewed like so:
rotated ...
0
votes
2
answers
30
views
Keyframe animation issue with transform-origin
I'm trying to build an animation for opening a hamburger menu. I am struggling to get the hamburger to the x. In theory I seem to be doing everything right but the result tells me otherwise xD. I've ...
4
votes
1
answer
42
views
how to keep the hover background after the user moved the mouse until the transform finishes
I got a div that changes its background to an image when a user hovers over it. The background is doing fine when the user hovers over it and the transform effect is applied smoothly, but when the ...
0
votes
0
answers
10
views
Wrong position for nested fixed element when using transform on parent [duplicate]
So, I found out that if you have nested fixed elements, and the parent has a transform, then the children acts as an absolute element instead of a fixed element.
Nested fixed element without transform ...
0
votes
2
answers
40
views
CSS - counter rotateX messes up on-hover effect
So I want to create a set of buttons that satisfies the following properties:
Shape is an isosceles trapezoid (this is currently achieved by transform: perspective(200px) rotateX(-35deg)
On hover, ...
0
votes
1
answer
32
views
Laggy CSS animation with transform property
I have a pretty simple animation with only one element, but when I scroll, it turns out to be pretty laggy, though I use requestAnimationFrame() and transform property instead of top/left. What's the ...
1
vote
2
answers
45
views
Removing whitespace after using transform
So I was working on an HTML SPA. I created sections and wanted each section to be horizontally split in 40:60 ratio. The problem is that when I want to vertically center content in the columns, it is ...
0
votes
1
answer
30
views
How do I get rid of lag while using transform on scroll event?
So I'm trying to add a smooth scrolling effect for a site that I'm working on. Here is the link to the fiddle of the problem I'm trying to solve.
What I'm doing here is watching the scroll event and ...
1
vote
1
answer
40
views
How can I transfer this Jquery function into a react function?
My problem is I don't know how to implement the Jquery code into a react app
This is an alternating side coming in transform
I regularly use this code in my applications to add a little motion to the ...
0
votes
2
answers
54
views
CSS animation transform translateY also changing translateX, but is not specified in animation
Here, I have a simple CSS file containing 2 animations.
.div
transform: translateX(-50%);
}
.fade-in {
animation-name: fade-in;
animation-duration: .2s;
}
.fade-out {
animation-name: ...
0
votes
0
answers
38
views
How can I make a cloud image move in CSS without moving along with the written content in HTML?
I want the cloud image to move in the background without being attached to the written content. This is what I have done so far. I have attempted other ways, but I still have the same problem.
....
0
votes
0
answers
42
views
Simple CSS transform/animation not working on ANDROID/APPLE
I added some simple CSS animations (transition/transform/rotate) to a Color Scheme Generator Project.When you click on the hex value at the bottom, a "Copied To Clipboard" box cartwheels ...
0
votes
1
answer
50
views
chrome: CSS `translateX` resets on anchor tag click
I have a long, single-page site with many content sections.
There's a menu on the left that opens up with an animation, and when open it shifts the content section-wrapper to the right, so that the ...
0
votes
1
answer
56
views
Trying to calculate the value of a transform
I'm trying to make a function to calculate the value that I need to make the svg moving from a Point A to a Point B with an angle.
On this image, I have a flower
I would like to do that :
I'm trying ...
0
votes
0
answers
27
views
How to slow down transform and prevent shifting of element when hovered on?
I'm trying to create a Marquee that slows down when hovered on.
I managed to get the "slowing down" sorted, but for some reason, the elements shift when hovered on.
I searched around and ...
0
votes
3
answers
45
views
Why can't I undo transform:scale() with the formula 1/a?
I am trying to write some JavaScript code that scales a div element using the transform:scale() CSS property, and then un-scales it so that the element returns to its original size. I thought that if ...
0
votes
1
answer
54
views
CSS, Rotated div makes page horizontal scroll
I am trying to design a footer for my website like this:
but I've got this result, causing a horizontal scroll (red background is for better showing the problem)
.footer-container {
background-...
0
votes
0
answers
24
views
How do I stop Chrome from erasing scaled elements on my screen?
I am writing code in jsPsych (a JavaScript library) and would like to scale my screen using the CSS transform:scale() property so that the elements are larger. However, when I apply the scale ...
1
vote
1
answer
93
views
How to remove the unwanted jagged aliasing in Arial/Times Font for "writing-mode: vertical-rl & transform: rotate(180deg)"?
Given some vertical text as part of a sideways navigation using simply and only:
writing-mode: vertical-rl;
transform: rotate(180deg);
However, on both Chrome & Firefox, on both of my standard ...
0
votes
1
answer
62
views
Rendering Problem in BOTH Chrome & Firefox with CSS Transform
Although sometimes a pixel here or there must be forgiven and forgotten.
But in this example this simple menu's need to be rendered pixel-perfectly!
That is to say, the gaps between the menu items ...
0
votes
0
answers
60
views
Firefox 100: CSS 3D Transform rotateY(180deg) and SVG not playing well together
This may be a browser-bug relating to how Firefox Desktop 100.0.2. handles SVG and CSS Transforms.
Or else I'm doing something wrong to bring about this undesired effect.
I have a <button> ...
0
votes
0
answers
32
views
Safari selects wrong drag element when elements use transforms instead of left and top
When I have 3 draggable divs using position: absolute and positioning them using left and top the items are correctly draggable on Safari (and other browsers).
But when I set left and top to 0 and ...
1
vote
1
answer
40
views
On hovering any elements transform all the elements
I have 3 elements: svg, p and p
HTML code
<svg xmlns="http://www.w3.org/2000/svg" class="absolute top-1/4 left-12" width="335.312" height="119.152" viewBox=&...
0
votes
1
answer
90
views
Very blurry scale transform animations in Firefox and connection with hover/tap
The code snippet involves four identical patterns that use animations to adjust the scale.
In Firefox they begin extremely blurry and remain like that until you hover the mouse over anywhere in the ...
0
votes
2
answers
60
views
CSS to put the game player in its position
I'm making a game using React.js, and the player element is a simple image with sprite images implemented in CSS:
.player {
position: absolute;
height: 32px;
width: 32px;
object-fit: ...
0
votes
1
answer
24
views
Make the layout use the transformed coordinate (CSS)
Is there a way to make HTML/CSS to use the transformed coordinates in layout calculations? E.g. if I scale a div, I want the next div to automatically start on the scaled div's boundary.
body {
...
0
votes
0
answers
51
views
CSS transform-origin on <g> element for centered rotation?
I don't quite understand the transform-origin CSS rule.
If you have a plain <svg> with changing sizes (width, height) and some <rect> elements in it, how can you rotate a <g> element ...
0
votes
2
answers
39
views
Can you have different transition times on the same transition property?
I have a settings button (img with an icon as the src) that I want to spin when the cursor is hovering, and then scale down and back to normal when the user presses on it.
#settings-button:hover {
...
1
vote
2
answers
36
views
Apply transformation to CSS element after previous transformation ended
I am trying to chain together 2 transforms, but I want the 2nd one to begin after the 1st one ends.
This is how I am trying to do it:
.trailingNote {
position:absolute;
bottom:0px;
background:...
2
votes
0
answers
79
views
How to transform vertical z elevation coordinates in R sf
I have some spatial data recorded by a GPS/GNSS that includes Lat/Lon and Height Above Ellipsoid (HAE, meters) altitude values, all are referenced to NAD83(2011), EPSG:6318. I'm trying to convert the ...
0
votes
0
answers
15
views
Get wrong reslut while calculate d path with transform matrix to a new d path, how to solve it? [duplicate]
document.getElementById('green-1').setAttribute('d', computeFromMatrix(document.getElementById('red-1')))
document.getElementById('green-2').setAttribute('d', computeFromMatrix(document....
3
votes
0
answers
156
views
CSS `transform` is affecting `background-attachment`
Using CSS transform on a parent element affects all other children and their background-attachment properties.
In the example I'm providing, I am faking the acrylic blur effect inside the children ...
0
votes
1
answer
67
views
square rotate in css grid creates gaps
Rotating a square div inside a css grid create gaps. Why?
Here is a simple example:
div {
height:100%;
width: 100%;
margin:0;
display:block;
}
.square{
background: skyBlue;
}
...
0
votes
1
answer
48
views
Circle text animation bugfixing
I worked with this tutorial, and coded this:
Splitting();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body {
display: flex;
justify-content: center;
...
0
votes
1
answer
132
views
CSS scale and centre image within scrollable container without cropping
I'd like to zoom an image so that the user can scroll around it after the zoom.
The following example works well but I have to set the origin to top left as otherwise the image is cropped to the top ...
1
vote
0
answers
30
views
Why does overflow break translateZ positioning?
I'm working on a parallax effect and would like to align my layer in 3D space using translateZ. But adding an overflow property to the wrapper seems to break the Z-positioning of its children. You can ...
0
votes
2
answers
74
views
Radio button animation , transition not working
.container3 {
padding: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.container3 .materiali {
padding: 8px 48px;
margin: 8px;
font-family: ...
0
votes
0
answers
21
views
How to pause transition / transformation effect momentarily in JS?
I am trying a simple animation effect of a flipping card using CSS and JS and I tried this approach (that is not working):
CSS:
.card {
user-select: none;
-webkit-user-select: none;
-khtml-...
0
votes
1
answer
73
views
How to maintain position after changing div transform-origin?
Let's say I had the following code:
function rotate() {
const elem = document.querySelector(".rect");
elem.style.transformOrigin = "top right";
}
.rect {
width: 200px;
height: 100px;
...
0
votes
0
answers
22
views
How to prevent a rotated resize: auto div from moving when resizing it?
This is a follow-up to my previous question.
Say we have the following code:
.rect {
transform: rotateZ(45deg);
width: 200px;
height: 100px;
resize: auto;
overflow: hidden;
background-...
1
vote
3
answers
125
views
How to prevent a rotated div from moving when changing its width?
I have a reproduction of the issue I'm facing below:
.rect {
transform: rotateZ(45deg);
background-color: #ddd;
position: absolute;
width: 300px;
height: 200px;
animation: 3s linear ...