標簽[css-transforms] - 堆棧內存溢出

[英]Fill element with slanted background on hover left to right, left to right

有沒有什么辦法可以讓這個 animation 也有傾斜的背景？使用純 css 還是反應 spring？ Hover animation 我已經嘗試了兩種解決方案，但不是 em go 我誹謗背景 + 從左到右，從左到右 animation。 HTML：我多么希望 slider 看起來像誹謗。 ...

制作 JS 滑動拼圖；想加.2s變換

[英]Making a JS sliding-tile puzzle; want to add .2s transform

我在 Javascript 中有一個滑動方塊拼圖，我想在移動方塊時添加 200 毫秒的過渡。我還想在加載時比它們已經做的更多地洗牌（根據我的 JS 代碼的最后幾行，應該是 100 次，但這似乎不是很有效）。你可以在這里查看我的所有代碼： https://codepen.io/Xjjacobx/p ...

CSS 如何計算“width: max-content”的translateX值？

[英]CSS How to calculate the translateX value of "width: max-content"?

使用width: max-content時應該如何計算translateX()值？我希望文本完全滾出容器。 ...

我嘗試使用“Transform translate”使 div 居中，但我的 div 在頁面上而不是居中

[英]I tried to use "Transform translate" to center a div but it my div is up the page than center

基本上這是 css 代碼。 .login-box { width: 280px; position: relative; top: 50%; left: 50%; transform: translate(-50%, 50%) } <div class="login-box"> &lt ...

Mobile Transform Origin Property 與 Web 不一致

[英]Mobile Transform Origin Property not consistent with Web

我有一個正在開發的應用程序，它允許用戶在 SVG 上放置“引腳”。這些引腳可以在底層 SVG 周圍移動，坐標保存在數據庫中。圖釘還有一個底部中心的“質心”，我存儲圖釘尖端的坐標，而不是圖釘圖標的 0,0 原點。我正在嘗試實現一項功能，當縮小底層 SVG 時，允許引腳顯示更大，放大時縮小（想想谷歌 ...

css3 從方形圖像到沒有 x 旋轉的梯形

[英]css3 from squared image to trapezoid without x rotation

我正在嘗試將帶有背景圖像的方形 div 轉換為梯形。我想以 2D 的方式制作它，就像 Photoshop 的“扭曲”工具所做的一樣。基本上，我想要的只是縮小正方形的頂部並使圖像相應地變形。 3D 轉換“似乎”可以解決問題：它適用於大多數用例，但不是所有用例。事實上，它是正方形旋轉 30 度 ...

是否可以僅使用 CSS transform 屬性來調整元素的 width 屬性而不拉伸它？

[英]Is it possible to use CSS transform property only to adjust an element's width property without stretching it?

我想要實現的是僅在#b:hover上使用transform來實現#a:hover的行為，代碼如下： div#a, div#b { width:100px; height:30px; background:#ccc; } div#a:hover { width:150px; } div#b:hov ...

為什么 CSS 在多次打開 Safari 后旋轉會隨機切換方向，我該如何防止這種情況發生？

[英]Why does CSS rotate randomly switches direction after multiple turns on Safari and how can I prevent this?

我需要創建一個卡片元素，單擊時它總是朝同一方向翻轉，下面的代碼片段完全符合我的要求，但僅當使用 Chrome 和 Firefox 時。在 iOS 和 MacOS 上查看 Safari 上的代碼片段時，遇到一個奇怪的問題在大約 20 次點擊后，卡片隨機來回翻轉，並且變得不可預測，如隨附的屏幕記錄所示 ...

CSS3 轉換：matrix3d 在 Chrome、Edge 和 Safari 與 Firefox 中給出其他結果

[英]CSS3 transform: matrix3d gives other results in Chrome, Edge & Safari vs Firefox

我正在嘗試使用 css 變換矩陣 3d 在 SVG 中將 2 個圖像彼此疊加。在 Firefox 中，這看起來不錯，但在 Chrome、Safari 和 Edge 中，我得到了不同的結果。任何人都知道我做錯了什么或者是否存在某種限制？相關代碼： Firefox中的結果：其他瀏覽器的結果： ...

在CSS中點擊時如何創建一個按鈕總是同向旋轉？

[英]How can I create a button that always rotates in the same direction when clicked in CSS?

我的目標是在 css 中制作一張可翻轉的卡片，點擊時它總是繞 x 軸旋轉，但我不知道如何讓卡片每次都沿相同方向旋轉。我得到的只是第一次點擊時卡片旋轉了180°，再次點擊時它會向相反的方向旋轉回去，這不是我想要達到的那種效果。我找到了這個解決方案，但它使用 JQuery 並且感覺很老套，是否有更 ...

擺脫關閉移動菜單 animation on window resize

[英]Getting rid of the closing mobile menu animation on window resize

我正在為學校建立一個沒有 JS 的小型網站，但我遇到了 animation 問題。在調整 window 的大小時，我想擺脫移動菜單上的關閉 animation。因為目前，如果我減小 window 的大小，菜單會出現一小會兒，然后再轉到側面（視口之外）。我在媒體查詢中的菜單一般樣式如下： ...

阻止 img 被轉換成超越 div

[英]stop img from being transformed beyond div

我有一個位於 div 中的圖像。圖像幾乎總是比 div 大，這很好，因為溢出被隱藏了。我希望用戶能夠調整圖像的可見部分（在 div/窗口內），但阻止他們調整超過 div 邊界的 xy 坐標。轉換有效，但它也讓我將圖片完全移出 div。現在，有沒有辦法為轉換設置邊界，並在圖片的邊緣移過（或即 ...

CSS 轉換屬性在通過 JS 觸發時不起作用 function

[英]CSS transform property not working when it is triggered through JS function

transform 屬性在某些情況下會起作用，但在這種情況下我做錯了什么：制作一個 span 元素並將其放在 pre 標簽的 innerHTML 中 Span 元素的不透明度為 0，變換為 2s。選擇此跨度元素，然后將不透明度更改為 0。所有這一切都在一個 function 中完成，如下所 ...

使用基於當前 state 的動畫淡入/淡出元素

[英]Fading elements in / out with animations based on the current state

我有一個元素，我想根據 boolean state 顯示/隱藏，但我也希望它使用轉換來完成。檢查以下示例： const App = () => { const [visible, setVisible] = React.useState(false) return ( <div&gt ...

CSS 旋轉的 div 邊框顯示奇怪的輪廓

[英]CSS rotated div border shows odd outline

我正在嘗試旋轉帶邊框的 div。邊框與背景顏色相同。邊框輪廓和背景之間出現一條很細的線。下面是我的代碼。我試圖擺脫奇怪的線。 body { background-color: black; } div { width: 50px; height: 50px; background-colo ...

為什么我的 3D animation 在桌面上運行流暢，但在移動設備上運行不流暢？

[英]why my 3D animation runs smoothly on desktop but not on mobile?

它在桌面上運行良好，但在移動設備上運行很糟糕:( 抱歉無法向您顯示結果 bcs 我無法獲得許可 TT_TT 基本上 animation 是關於讓對象在一個視角的 3D 上下文中通過 z-index 飛向您的方向（靠近時變得模糊）我懷疑這可能與移動數千個像素有關？ :( 我怎樣才能提高移動性能？ ...

繪制到 canvas 時如何縮放文本？

[英]How to scale text when drawing to canvas?

我正在使用 CSS 變換比例縮放文本，例如我還需要在 canvas 元素上繪制相同的文本我應該如何縮放上面的js function中的文本？我已經硬編碼了字體大小20px但我將如何使用2和4的比例值？ ...

用絕對位置理解 React Native 中的 CSS 三角形和菱形交互

[英]Understanding CSS triangles and rhombus interactions in React native with absolute positions

我有一個帶有菱形和三角形的復雜結構圖。我能夠使用 CSS 技巧和絕對 position 屬性創建結構。我希望每個菱形和三角形都是可點擊的，但考慮到 CSS 三角形如何與邊界一起工作，行為並不像預期的那樣。帶有一些標記的 output 圖像在此圖像中，我們有一個菱形和兩個三角形，我想要的是： ...

轉換比例會破壞滾動條？

[英]Transforming scale ruins the scrollbars?

在 CSS 中，我們可以對圖像進行很好的縮放效果，而無需過多地使用它們的寬度和高度屬性：為了達到共同的目標，最好也調整原點：這樣，圖像將在保持原點位於中心的同時進行縮放，因此對人眼來說會更自然。但是，如果我們將這個圖像（以及為什么我們不應該這樣做）放入一個包裝器中，這似乎會破壞滾動條。考慮 ...

為什么我的旋轉 object 在拖入新的 position 后會重置其旋轉 position？

[英]Why is my rotated object resetting its rotation position after dragging into a new position?

我有一個可拖動和可旋轉的可移動反應組件。如果我旋轉 object，它會按預期旋轉，但是當我拖動它（旋轉后）時，它會重置為原始旋轉角度。以下是 onDrag 和 onRotate 函數：這是旋轉后的樣子：這是拖到新的position后的樣子（旋轉已重置）：沙盒 ...