HTML5 Canvas Javascript - 如何使用瓦片制作可移動的 ZFCC790C72A86190DE1B549D'DZ3D'55

[英]HTML5 Canvas Javascript - How to make a moveable canvas with tiles using 'translate3d'?

我在使用可移動 canvas 時遇到問題，它會隨着“播放器”在 map 周圍的移動而調整。 由於繪制 600 塊瓷磚，每秒 60 次是非常低效的，我切換到使用translate3d並且僅在玩家越過完整瓷磚時才draw - 但它總是出現故障並且不平滑移動。 我將如何正確實現這一目標？ const ...

CSS 在同一元素上的變換屬性沖突

[英]CSS conflicting transform properties on same element

我正在設計一個 UI，它允許用戶拖放一個框（紅色輪廓）以確定它在屏幕上的 position（黑框）。 用戶界面也可以通過更改右側的輸入來移動它。 我正在使用 Angulars cdkDrag 的拖放功能，它適用於 移動框（我使用事件偵聽器來更新右側的輸入值）。 當應用用戶輸入時，我會根據輸入更新此屬 ...

Css 抖動文本翻譯

[英]Css jittery text translate

[解決方案] 解決方案是使用will-change CSS 屬性強制 GPU 渲染：will-change: transform; [原始問題] 我一直在互聯網上進行大量挖掘，但沒有找到一個看似相當簡單的問題的解決方案，即翻譯包含文本的持有人，並使該文本順利移動。 這是一個問題的例子，你可以看 ...

css translateZ 使元素模糊

[英]css translateZ makes elements blurry

這是我的問題的重現（codepen，因為顯然stackoverflow的 iframe 會以某種方式影響渲染）： https://codepen.io/Ironimus/pen/GRjxpXZ 使用transform: translateZ和perspective內部元素的邊緣和文本變得模糊。 它 ...

動畫兩個圓圈恰好在中間相遇

[英]Animating two circles to meet exactly in the middle

所以我的目標是讓兩個圓圈從屏幕的兩側相遇並在中間相遇以執行 animation 的后半部分（縮放和不透明度變化）。 但是通過設置初始關鍵幀並最后使用 vw 它們不會在中間相遇 - 因為 vw 值是相對於 div 的左側而不是中心（我使用 vw 因為我需要它來響應）。 所以，發生的事情是圓的左側在中心 ...

使用 translate3d 和 scale 進行轉換

[英]Using translate3d and scale for transformations

我想制作一個遵循 cursor 並同時作為 animation 增長/收縮的div 。 我使用top和left更改了div的 position 但 animation 有時有點不穩定。 我想使用translate3d使動畫流暢，但我正在努力將translate3d與scale結合起來 我想修改這個 ...

單擊 3d 旋轉元素內的元素？

[英]Clicking on elements inside of a 3d-rotated element?

所以我在構建一個小網站時遇到了問題。 我使用 CSS 變換將 3 個圖像作為牆放置（每個圖像都在自己的 div 內）。 在圖像的 div 中，我有用戶應該能夠點擊的較小的 div。 但是，較小 div 的可點擊邊界不受 3d 變換的影響。 這意味着它保持 2d 並從視覺元素偏移。 或者至少這是 ...

設置 translate3d 獨立於其他變換

[英]Setting translate3d independent of other transform

我有一系列帶有動態旋轉的按鈕： <button type="button" class="picker-opt" opt-index="1" style="transform: rotateX(84.64deg) translate3d(0px, 0px, 90px); transition- ...

CSS轉換中的另一個轉換元素

[英]Css transform in another transformed element

我正在制作一些3D轉換的卡，上面有圖像和標題，整個卡已transform: rotateX(Xdeg) rotateY(Ydeg) ，並且可以使用mouseover和mousemove正常工作。 當我想在卡片上的title或button上添加translate3d時發生了問題，當鼠標在卡片 ...

動態translate3d，每次點擊添加一個數字

[英]Dynamic translate3d by adding a number per click

嗨，所以我試圖模擬滑塊中的箭頭，我將元素向左和向右移動。 到目前為止，我有物品向右移動但只有一次。 https://i.gyazo.com/34a0ef4a5064c2942aca7c717a775e8b.mp4 到目前為止，這是我的代碼 所以我正在嘗試添加和刪除now ...

使用JQuery轉換3d

[英]Transform Translate 3d with JQuery

我有一個小問題，我嘗試為div滾動div動畫，但是好像我在某個地方犯了一個錯誤。一開始，加載頁面時，定位並沒有發生在窗口中央，正如我所指出的，但是向左偏移這是我的代碼如果有人知道或看到了什么問題，將非常感謝 $(window).scroll(function() { var sc ...

滾動回窗口頂部時，scrollTop 位置不正確

[英]scrollTop position incorrect when scrolling back to top of window

我正在使用scrollTop來獲取內部滾動 div .content-inner的當前滾動位置。 從這里開始，我將添加一個translate3d來更改另一個 div .header-top的位置，以賦予它動畫效果。 我遇到的問題是在.content-inner向上滾動后， .header-top位 ...

制作具有Z轉換背景的摳圖狀div

[英]Making a cutout-like div with a z-translated background

我要制作的div在滾動時具有具有3d效果的背景，而這可以通過translateZ實現。 最后，它應該看起來像切口或窗口，通過它們您可以看到（背景）圖像。 編輯：因此，如果您滾動瀏覽頁面，您可以看到那些方框/切口，但是其中的圖像在滾動時移動較慢，從而產生了距離較遠的效果。 編輯結束 我 ...

Translate3D與絕對位置元素重疊

[英]Translate3D overlaps absolute position elements

我有一個帶有絕對位置的導航欄和一個法師滑塊。 我想用translate3d / translateX動畫圖像過渡，圖像最終與我的導航欄重疊。 快速示例： https ： //jsfiddle.net/tqu0n4za/ 什么是保持絕對定位但將導航欄推到圖像滑塊前面的好方法？ ...

CSS 翻譯的父母的兄弟姐妹隱藏了孩子

[英]CSS Translated parent's sibbling hides child

我正在使用ngx-datatable 。 它使用transform: translate3d使用其高度定位每一行。 當我在里面放一個下拉菜單時，問題就出現了，它下面的元素隱藏了下拉菜單的選項。 如下圖所示： 我的ngx-datatable配置： <ngx-datatable ...

translate3d使元素跳轉

[英]translate3d makes element jump

我使用transform的translate3d將彈出div放在容器的中心。 在桌面瀏覽器中，它工作正常，但在移動瀏覽器中，它會跳轉。 當用戶單擊按鈕時，彈出div的不透明度值為 1，並顯示要阻止 JavaScript的屬性。 它會顯示在假定位置的下方和左側，然后移至實際位置。 ...

里面的translate3d溢出：打印時隱藏到第二頁

[英]translate3d inside overflow:hidden leaks to second page when printed

我正在生成包含地圖的報告。 我為此使用Mapbox。 我遇到了一個問題，其中一個磁貼泄漏到了打印預覽的第二頁（在Chrome中測試）。 我一天的大部分時間都在嘗試解決這個問題。 我似乎已經找到了根本原因。 地圖圖塊放置在使用transform: translate3d定位的元素上。 ...

使用Z-index與translate3d分層

[英]Layering using z-index with translate3d

如何強制瀏覽器在<header> <div class="child-above">呈現<div class="child-above"> <header> 。 在我的樣式中， translate3d和z-index屬性之間存在沖突。 從理 ...

如果元素翻譯3d…addClass

[英]If element translate 3d … addClass

我該如何編寫執行此操作的腳本？ 如果div類“ test”具有屬性translate3d (0px, 100px, 0px)向其添加“ active”類，否則將其刪除。 我嘗試過這樣的事情，但這是不對的... ...

由於translate3d，偽元素上的邊框寬度不一致-但是為什么呢？

[英]Inconsistent border widths on pseudo-elements because of translate3d — but why?

（我嘗試搜索此內容，但似乎無法正確描述它-如果此答案退出，請指出正確的方向！） 我在玩一些CSS規則。 我想在標題中的導航錨周圍顯示一個偽元素的特定的輔助2px寬邊框，以打開模態並模糊絕對定位的背景圖像div #bg，其位置如下： 由於我想過渡模糊效果，因此我在#bg上添加了tr ...