将变换原点移回CSS中元素的中心 [英] Move transform-origin back to the center of the element in CSS
问题描述
当CSS元素转换出原始位置时， transform-origin 不随它们一起移动;使所有后续的转换和旋转仍然源于它原来的 transform-origin （下面的例子）。
绕过这个，我知道...这就是不断添加所有新的转换到前面的转换的权利。像这样： transform：translateY（-5rem）rotate（45deg）translateY（-10rem）rotate（15deg）... 等等这似乎总是启动新的转换根据需要设置当前元素的中心。
问题
正在使用这种技术基于用户输入来转换元素，您将不断地向DOM添加转换。占用大量内存并导致其他不需要的滑动效果（可能）。
这是一个动画，显示 transform-origin 在每个元素之后不会移动到元素的中心位置转换：
'use strict'; function firstRotation（ ）{var v = document.getElementById（'v-wrp'），status = document.getElementById（'status'）setTimeout（function（）{status.innerHTML ='首先，V围绕它旋转'; v.classList.add（'first-rotation'）; status.classList.add（'update'）;}，1000）;< b>转换原点< / b> } function firstTranslation（）{var v = document.getElementById（'v-wrp'），status = document.getElementById（'status'）setTimeout（function（）{status.innerHTML ='接下来，元素会在其中向前转换\'\当前方向。< b>变换原点< / b>停留在它后面的位置。'; v.classList.remove（'first-rotation'）; v.classList.add 'first-translation'）;}，6000）; } function info（）{var v = document.getElementById（'v-wrp'），status = document.getElementById（'status'）setTimeout（function（）{status.innerHTML ='这下一个动画是它的地方'显而易见的是，< b>变换原点< / b>不再居中，而是返回它们在这些变换的开始位置';}，11000）。 }函数lastRotation（）{var v = document.getElementById（'v-wrp'），status = document.getElementById（'status'）setTimeout（function（）{status.innerHTML ='这最后一次旋转比期望的要宽得多，因为'v.classList.remove（'first-translation'）; v.classList.add（'last-rotation'）;}，16000）; } function end（）{var v = document.getElementById（'v-wrp'），status = document.getElementById（'status'）setTimeout（function（）{status.classList.remove（'update'）;}，21000 ）; } function start（）{firstRotation（）; firstTranslation（）;信息（）; lastRotation（）; end（）;} start（）;
/ * / / / / / / / / / / / / /动画定义/ / / / / / / / / / / / * /。first-rotation，.first-translation，.update， ：5s;动画定时功能：轻松进入;动画填充模式：forwards;}。first-rotation {animation-name：first-rotation;}。first-translation {animation-name：first-translation;} update {animation-name：update; animation-iteration-count：infinite;}。last-rotation {animation-name：last-rotation;} / * / / / / / / / / / / / / / / / / / / / / / / / / / / * / @关键帧first-rotation {100％{transform：rotate（315deg）; }} @关键帧first-translation {0％{transform：rotate（315deg）; } 100％{transform：rotate（315deg）translate（0，-5rem）; }} @ keyframes update {0％{background-color：mediumslateblue; }} @关键帧last-rotation {0％{transform：rotate（315deg）translate（0，-5rem）; } 100％{transform：rotate（400deg）translate（0，-5rem）; }}
< head> <风格> @import url（https://fonts.googleapis.com/css?family=Nunito）; html {overflow：hidden;显示：flex; justify-content：center; align-items：center;身高：100％; font-family：Nunito，sans-serif; } html，body {margin：0;填充：0; } .v {display：block; font-size：2rem;变形：旋转（180度）; } p {width：100％;填充：0.5rem;位置：绝对;底部：0;左：0; }< / style>< / head>< body> < div id =v-wrpclass =v-wrp> < b class =v> V< / b> < / DIV> < p id =statusclass =status>< / p>< / body>
问题
我需要在CSS或JS中找到重置位置的方法的 transform-origin 或将其移回到变形元素的中心。在右侧添加更多转换是一种在实时交互式环境中不适合我的技术。可以在这里看到一个尝试：转换添加......无休止地。
如何计算转换元素的位置并将 transform-origin 移回到它是中心或者我如何获取多个变换值并将它们压缩为一个使元素保持在同一位置的值？
您也可以使用 top 和 left 来转换＃v-wrp 。您可以在 transform-origin 属性中创建动画。在< b> 元素中试试。我希望它现在能够正常工作。
When CSS elements are transformed out of their original location the transform-origin doesn't move with them; making all subsequent transforms and rotations still originate from it's original transform-origin ( example below ).
There is one way around this that I know of... and that's to keep adding all new transforms to the right of the previous ones. like this: transform: translateY ( -5rem ) rotate( 45deg ) translateY( -10rem ) rotate( 15deg )... etc. This seems to always start the new transforms from the center of the current element as desired.
the problem
When you are transforming an element based on user input using this technique you will keep adding transforms to the DOM...endlessly. Taking up a lot of memory and causing other unwanted sliding effects ( possibly ).
Here is an animation showing how the transform-origin doesn't move to the center of the element after each transform:
'use strict';
function firstRotation() {
var v = document.getElementById( 'v-wrp' ),
status = document.getElementById( 'status' )
setTimeout( function() {
status.innerHTML = 'First, the V is rotated around it\'s central axis.\
The <b>transform-origin</b> is centered.';
v.classList.add( 'first-rotation' );
status.classList.add( 'update' );
}, 1000 );
}
function firstTranslation() {
var v = document.getElementById( 'v-wrp' ),
status = document.getElementById( 'status' )
setTimeout( function() {
status.innerHTML = 'Next, the element is translated forward in it\'s \
current orientation. The <b>transform-origin</b> stays\
behind where it was.';
v.classList.remove( 'first-rotation' );
v.classList.add( 'first-translation' );
}, 6000 );
}
function info() {
var v = document.getElementById( 'v-wrp' ),
status = document.getElementById( 'status' )
setTimeout( function() {
status.innerHTML = 'This next animation is where it\'s evident that\
the <b>transform-origin</b> is no longer centered, but\
back where it was at the beginning of these transforms';
}, 11000 );
}
function lastRotation() {
var v = document.getElementById( 'v-wrp' ),
status = document.getElementById( 'status' )
setTimeout( function() {
status.innerHTML = 'This last rotation is far wider than desired because the\
transform origin is back where it started.'
v.classList.remove( 'first-translation' );
v.classList.add( 'last-rotation' );
}, 16000 );
}
function end() {
var v = document.getElementById( 'v-wrp' ),
status = document.getElementById( 'status' )
setTimeout( function() {
status.classList.remove( 'update' );
}, 21000 );
}
function start() {
firstRotation();
firstTranslation();
info();
lastRotation();
end();
}
start();
/* / / / / / / / / / / / / / ANIMATION DEFINITIONS / / / / / / / / / / / / / */
.first-rotation, .first-translation, .update, .last-rotation {
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.first-rotation {
animation-name: first-rotation;
}
.first-translation {
animation-name: first-translation;
}
.update {
animation-name: update;
animation-iteration-count: infinite;
}
.last-rotation {
animation-name: last-rotation;
}
/*/ / / / / / / / / / / / / / ANIMATION KEYFRAMES / / / / / / / / / / / / / /*/
@keyframes first-rotation {
100% {
transform: rotate( 315deg );
}
}
@keyframes first-translation {
0% {
transform: rotate( 315deg );
}
100% {
transform: rotate( 315deg ) translate( 0, -5rem );
}
}
@keyframes update {
0% {
background-color: mediumslateblue;
}
}
@keyframes last-rotation {
0% {
transform: rotate( 315deg ) translate( 0, -5rem );
}
100% {
transform: rotate( 400deg ) translate( 0, -5rem );
}
}
<head>
<style>
@import url( "https://fonts.googleapis.com/css?family=Nunito" );
html {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: "Nunito", sans-serif;
}
html,
body {
margin: 0;
padding: 0;
}
.v {
display: block;
font-size: 2rem;
transform: rotate( 180deg );
}
p {
width: 100%;
padding: 0.5rem;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="v-wrp" class="v-wrp">
<b class="v">V</b>
</div>
<p id="status" class="status"></p>
</body>
the question
I need to find a way in CSS or JS to reset the position of the transform-origin or move it back to the center of the transformed element. Adding more transforms to the right is one technique that isn't working for me in a real time interactive environment. An attempt can be seen here: Transforms are added...endlessly.
How can I either calculate the location of a transformed element and move the transform-origin back to it's center OR how can I take multiple transform values and condense them into one value that keeps the element in it's same place?
You can also use top and left to translate the #v-wrp. And you can create an animation in the transform-origin property. Try it in the <b> element. I hope it will be working right now.
这篇关于将变换原点移回CSS中元素的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
