原点返回到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 = '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> 您也可以使用top和left来翻译#v-wrp 。 您可以在transform-origin属性中创建动画。 在<b>元素中尝试。 我希望它现在能够正常工作。