旋轉時將元素指向圓心（CSS / JS）
[英]Aim element towards circle centre while rotating (CSS/JS)
問題描述
我試圖以圓周運動移動 10 個對象，同時它們指向圓心。
我已經使用一些 trig in.js 將元素定位在圓上，但是當我嘗試圍繞圓心旋轉它們時，它們旋轉不正確，中心看似隨機。 我正在嘗試使用transformOrigin屬性圍繞中心旋轉它們。
如果我沒有為SeedParent指定“初始旋轉”，則旋轉按預期工作，但箭頭的方向都指向同一方向（我希望它們都指向中心）。 我認為這是因為在更改父級的“初始旋轉”時旋轉軸發生了變化。 希望代碼能更好地解釋：
注意：我不能給出原始的“種子”圖像，所以我有一個箭頭形狀。
function AddImageToDiv(Index){ var Seed = document.createElement("div"); var SeedParent = document.createElement("div"); var SpiralDiv = document.getElementById("spiralDiv"); //The seeds are added to the SpiralDiv Seed.classList.add("seedDiv", "Rotate"); SeedParent.classList.add("seedParentDiv", "Move") SpiralDiv.appendChild(SeedParent); SeedParent.appendChild(Seed); SetSeedPositionAndAngle(Seed, SeedParent, Index) //Position the seed on the edge of the circle using index to determine its position } function SetSeedPositionAndAngle(Seed, SeedParent, Index){ var Angle = 2*Math.PI/NumberOfSeeds * Index; var PositionOffset = {x: CircleRadius * Math.cos(Angle), y: CircleRadius * Math.sin(Angle)} SeedParent.style.transform = " translate(" + PositionOffset.x + "px," + PositionOffset.y +"px) rotate(" + (Angle + Math.PI * 0.9) + "rad)"; //Positioning handled in the parent element //If the ROTATE portion is taken out, the rotation works as expected, but the arrows do //not point towards the centre of the circle. Seed.style.transformOrigin = (-PositionOffset.x + Seed.clientWidth/2) + "px " +(- PositionOffset.y + Seed.clientWidth/2) + "px"; //Transform origin set as the coordinate to rotate around } const NumberOfSeeds = 10; //The number of elements in the circle const CircleRadius = 190; //Radius in pixels for (let index = 1; index < 11; index++) { AddImageToDiv(index); }
*{ margin:0px; padding: 0px; box-sizing: border-box; }:root{ --greytextcolor: #808080; } /* SEED ANIMATION */.seedDiv { display: inline-block; position: absolute; width: 110px; background:linear-gradient(45deg,transparent,orange); -webkit-mask:url('https://lh3.googleusercontent.com/proxy/5xwQBbe4tsxwqwDthUeiLd_UFRsFEDl3_TT2skCOLzQpgAnKyI5PT9Lfukwjdan6jDQNL0g7qrtupEXM_wQN3VZW') center/contain no-repeat; mask:url('https://lh3.googleusercontent.com/proxy/5xwQBbe4tsxwqwDthUeiLd_UFRsFEDl3_TT2skCOLzQpgAnKyI5PT9Lfukwjdan6jDQNL0g7qrtupEXM_wQN3VZW') center/contain no-repeat; }.seedDiv::before { content:""; display:block; padding-top:113.6%; /* Sets the padding of the top to 113.6% of the padding of the width due to ratio of the image */ }.seedDiv.Rotate{ animation-name: RotateAroundCenter; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-duration: 3s; animation-delay: 3s; /*I've set an animation delay, so you can see the inital positioning of the arrows*/ } #spiralDiv{ display: flex; justify-content: center; position: relative; top: 200px; } @keyframes RotateAroundCenter{ 100%{ transform: rotate(-360deg); } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="stylesheet:css"> <link href="https.//fonts.googleapis?com/css2:family=Roboto,ital,wght@0;100,0;300,0;400,0;500,0;700,0;900,1;100,1;300,1;400,1;500,1;700,1.900&display=swap" rel="stylesheet"> <script defer src="node_modules/swup/dist/swup.min.js"></script> <script defer src='index.js'></script> <title>Seed Rotate</title> </head> <body> <main id="swup" class="transition-fade"> <div id = "spiralDiv"> </div> </main> </body> </html>
如果有更好的方法可以做到這一點，我全神貫注:)
1 個解決方案
解決方案1
1 已采納 2020-06-22 11:20:14
我會簡化您的代碼並依靠 CSS 變量來簡化它。 訣竅是知道如何鏈接轉換。
在下面，您會注意到兩個旋轉，一個將定義箭頭的方向（放置在平移之后），另一個將圍繞圓旋轉元素（放置在平移之前）。 您也不需要任何轉換原點：
function AddImageToDiv(Index) { var SeedParent = document.createElement("div"); var SpiralDiv = document.getElementById("spiralDiv"); //The seeds are added to the SpiralDiv SeedParent.classList.add("seedDiv", "Rotate"); SpiralDiv.appendChild(SeedParent); SetSeedPositionAndAngle(SeedParent, Index) } function SetSeedPositionAndAngle(SeedParent, Index) { var Angle = 2 * Math.PI / NumberOfSeeds * Index; var PositionOffset = { x: CircleRadius * Math.cos(Angle), y: CircleRadius * Math.sin(Angle) } SeedParent.style.setProperty("--x", PositionOffset.x + "px"); SeedParent.style.setProperty("--y", PositionOffset.y + "px"); SeedParent.style.setProperty("--r", (Angle + Math.PI) + "rad"); } const NumberOfSeeds = 10; //The number of elements in the circle const CircleRadius = 190; //Radius in pixels for (let index = 1; index < 11; index++) { AddImageToDiv(index); }
* { margin: 0px; padding: 0px; box-sizing: border-box; } /* SEED ANIMATION */.seedDiv { position: absolute; width: 110px; background: linear-gradient(45deg, transparent, orange); -webkit-mask: url('https://lh3.googleusercontent.com/proxy/5xwQBbe4tsxwqwDthUeiLd_UFRsFEDl3_TT2skCOLzQpgAnKyI5PT9Lfukwjdan6jDQNL0g7qrtupEXM_wQN3VZW') center/contain no-repeat; mask: url('https://lh3.googleusercontent.com/proxy/5xwQBbe4tsxwqwDthUeiLd_UFRsFEDl3_TT2skCOLzQpgAnKyI5PT9Lfukwjdan6jDQNL0g7qrtupEXM_wQN3VZW') center/contain no-repeat; }.seedDiv::before { content: ""; display: block; padding-top: 113.6%; }.seedDiv.Rotate { animation: RotateAroundCenter 3s 3s ease-in-out forwards; transform: rotate(0) translate(var(--x), var(--y)) rotate(var(--r)); } #spiralDiv { display: flex; justify-content: center; position: relative; top: 200px; } @keyframes RotateAroundCenter { 100% { transform: rotate(-360deg) translate(var(--x), var(--y)) rotate(var(--r)); } }
<div id="spiralDiv"> </div>
如果您以不同的方式進行轉換，則可以簡化更多代碼
function AddImageToDiv(Index) { var SeedParent = document.createElement("div"); var SpiralDiv = document.getElementById("spiralDiv"); //The seeds are added to the SpiralDiv SeedParent.classList.add("seedDiv"); SpiralDiv.appendChild(SeedParent); var Angle = 2 * Math.PI / NumberOfSeeds * Index; SeedParent.style.setProperty("--r", (Angle + Math.PI) + "rad"); } const NumberOfSeeds = 10; //The number of elements in the circle for (let index = 0; index < NumberOfSeeds; index++) { AddImageToDiv(index + 1); }
/* SEED ANIMATION */.seedDiv { position: absolute; width: 110px; background: linear-gradient(45deg, transparent, orange); -webkit-mask: url('https://lh3.googleusercontent.com/proxy/5xwQBbe4tsxwqwDthUeiLd_UFRsFEDl3_TT2skCOLzQpgAnKyI5PT9Lfukwjdan6jDQNL0g7qrtupEXM_wQN3VZW') center/contain no-repeat; mask: url('https://lh3.googleusercontent.com/proxy/5xwQBbe4tsxwqwDthUeiLd_UFRsFEDl3_TT2skCOLzQpgAnKyI5PT9Lfukwjdan6jDQNL0g7qrtupEXM_wQN3VZW') center/contain no-repeat; animation: RotateAroundCenter 3s 3s ease-in-out forwards; transform: rotate(0) rotate(var(--r)) translate(-200px); }.seedDiv::before { content: ""; display: block; padding-top: 113.6%; } #spiralDiv { display: flex; justify-content: center; position: relative; top: 200px; } @keyframes RotateAroundCenter { 100% { transform: rotate(-360deg) rotate(var(--r)) translate(-200px); } }
<div id="spiralDiv"></div>
了解為什么在鏈接轉換時順序很重要的相關問題：為什么轉換順序很重要？ 旋轉/縮放與縮放/旋轉的結果不同
我們仍然可以優化最后的代碼：
const NumberOfSeeds = 10; //The number of elements in the circle for (let index = 0; index < NumberOfSeeds; index++) { var SeedParent = document.createElement("div"); var SpiralDiv = document.getElementById("spiralDiv"); //The seeds are added to the SpiralDiv SeedParent.classList.add("seedDiv"); SpiralDiv.appendChild(SeedParent); var Angle = 360 / NumberOfSeeds * (index + 1); SeedParent.style.setProperty("--r", (Angle + 180) + "deg"); }
/* SEED ANIMATION */.seedDiv { position: absolute; width: 110px; background: linear-gradient(45deg, transparent, orange); -webkit-mask: url('https://lh3.googleusercontent.com/proxy/5xwQBbe4tsxwqwDthUeiLd_UFRsFEDl3_TT2skCOLzQpgAnKyI5PT9Lfukwjdan6jDQNL0g7qrtupEXM_wQN3VZW') center/contain no-repeat; mask: url('https://lh3.googleusercontent.com/proxy/5xwQBbe4tsxwqwDthUeiLd_UFRsFEDl3_TT2skCOLzQpgAnKyI5PT9Lfukwjdan6jDQNL0g7qrtupEXM_wQN3VZW') center/contain no-repeat; animation: RotateAroundCenter 3s 3s ease-in-out forwards; transform: rotate(var(--r)) translate(-200px); }.seedDiv::before { content: ""; display: block; padding-top: 113.6%; } #spiralDiv { display: flex; justify-content: center; position: relative; top: 200px; } @keyframes RotateAroundCenter { 100% { transform: rotate(calc(var(--r) - 360deg)) translate(-200px); } }
<div id="spiralDiv"></div>
試圖在旋轉時將粒子對准相機並在三個js中相交時發出警告信息？
[英]Trying to aim the particles to camera while rotating and alert message on intersecting in three js?
使用 D3.js 將元素放置在圓線上並將它們向中心旋轉
[英]Placing elements on circle line and rotating them towards the center using D3.js
在背景上添加元素（圓圈）但在 html css js 中的文本后面
[英]Adding element (circle) on background but behind a text in html css js
在鼠標 hover 上使用 CSS 和 jQuery 停止圍繞圓圈旋轉項目的問題
[英]Problem with stopping rotating items around a circle with CSS and jQuery on mouse hover
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.