Мобильная версияCSS-преобразование Rotate() Ось X ведет себя иначе, чем Y и Z ⇐ CSS
-
Anonymous
CSS-преобразование Rotate() Ось X ведет себя иначе, чем Y и Z
While working on animating a cube in CSS, I found myself that after performing a 90° rotation on Y axis, if the next rotation happened on X axis, it behaved as if it were on Z axis. I worked on a visual representation of the space axes to be able to debug the behaviour and it looks like the X axis effectively has a dynamic orientation, meaning the rotations happen accordingly to the element own X axis, while on Y and Z axis, the rotations are always relative to the viewport. Is this behaviour normal? Am I missing something?
I made this codepen to debug the behaviour. Scroll down in the viewport to perform the rotations.
HTML:
1 2 3 4 1 2 3 4 body { width: 100vw; display: flex; justify-content: center; align-items: center; } #container { position:fixed; top:0; left:0; width: 100%; height:100%; transform-style: preserve-3d; perspective: 1000px; display: flex; justify-content: center; align-items: center; } #square, #square2 { width: 200px; height: 200px; background: red; position:relative; margin:120px; transform-style: preserve-3d; } .square h4 { margin:0; color:#000; font-size:30px; font-weight: bold; background: #FFF; padding:3px; width:40px; height:40px; border-radius: 5px; border: 2px solid #000; text-align: center; } .v { position:absolute; } .v1 { top:10px; left:10px; } .v2 { top:10px; right:10px; } .v3 { bottom:10px; right:10px; } .v4 { bottom:10px; left:10px; } #scrollElement { height: 10000px; width: 100vw; } gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline(); ScrollTrigger.create({ animation: tl, trigger: "#scrollElement", start: "top top", end: "100% 100%", scrub: 0.2 }); tl.to("#square", { rotateY: "90deg", ease: "circ.out", duration: 5 }) .to("#square", { rotationZ: "90deg", ease: "circ.out", duration: 5 }, "
Источник: https://stackoverflow.com/questions/755 ... om-y-and-z
While working on animating a cube in CSS, I found myself that after performing a 90° rotation on Y axis, if the next rotation happened on X axis, it behaved as if it were on Z axis. I worked on a visual representation of the space axes to be able to debug the behaviour and it looks like the X axis effectively has a dynamic orientation, meaning the rotations happen accordingly to the element own X axis, while on Y and Z axis, the rotations are always relative to the viewport. Is this behaviour normal? Am I missing something?
I made this codepen to debug the behaviour. Scroll down in the viewport to perform the rotations.
HTML:
1 2 3 4 1 2 3 4 body { width: 100vw; display: flex; justify-content: center; align-items: center; } #container { position:fixed; top:0; left:0; width: 100%; height:100%; transform-style: preserve-3d; perspective: 1000px; display: flex; justify-content: center; align-items: center; } #square, #square2 { width: 200px; height: 200px; background: red; position:relative; margin:120px; transform-style: preserve-3d; } .square h4 { margin:0; color:#000; font-size:30px; font-weight: bold; background: #FFF; padding:3px; width:40px; height:40px; border-radius: 5px; border: 2px solid #000; text-align: center; } .v { position:absolute; } .v1 { top:10px; left:10px; } .v2 { top:10px; right:10px; } .v3 { bottom:10px; right:10px; } .v4 { bottom:10px; left:10px; } #scrollElement { height: 10000px; width: 100vw; } gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline(); ScrollTrigger.create({ animation: tl, trigger: "#scrollElement", start: "top top", end: "100% 100%", scrub: 0.2 }); tl.to("#square", { rotateY: "90deg", ease: "circ.out", duration: 5 }) .to("#square", { rotationZ: "90deg", ease: "circ.out", duration: 5 }, "
Источник: https://stackoverflow.com/questions/755 ... om-y-and-z
