【发布时间】：2017-09-29 04:30:29
【问题描述】：
当 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 = '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>问题
我需要在 CSS 或 JS 中找到一种方法来重置 transform-origin 的位置或将其移回转换后元素的中心。在右侧添加更多变换是一种在实时交互环境中不适合我的技术。可以在这里看到一个尝试：Transforms are added...endlessly。
如何计算转换元素的位置并将transform-origin 移回其中心，或者如何获取多个转换值并将它们压缩为一个值以使元素保持在同一个位置？
【问题讨论】：
-
您应该将旋转应用于 .v 包装器，而不是其父级。试试看:)
-
@GCyrillus 动画应用于
v-wrp元素。如果我向它的父母申请，那将是body？ "var v = document.getElementById( 'v-wrp' )," -
您可以为元素的位置设置动画，而不是使用变换进行翻译。即使这不是最佳实践。当您使用 top/left/... 移动元素时，整个元素都在移动，包括它的所有属性，包括 transform-origin。
标签： javascript html css animation css-transforms