css-animations - css动画在移动时旋转
问题描述
我正在尝试创建一个动画
- 规模
- 旋转
- 翻译
但我不明白为什么旋转不能很好地播放translateX
,我试图让动画沿着z-axis
不像漩涡的连续运动播放,我搜索了很多,但我找不到我所追求的,所以任何帮助表示赞赏。
function reRun() {
document.querySelector('.item').classList.remove('spin-animation')
setTimeout(function() {
document.querySelector('.item').classList.add('spin-animation')
},300)
}
@keyframes spin {
0% {
transform: scale(1) rotateY(0deg) translate(0, 0);
}
25% {
transform: scale(2) rotateY(360deg) translate(-1rem, -1rem);
}
50% {
transform: scale(3) rotateY(0deg) translate(-1.5rem, -1.5rem);
}
75% {
transform: scale(4) rotateY(360deg) translate(-2rem, -2rem);
}
100% {
transform: scale(5) rotateY(0deg) translate(-2.5rem, -2.5rem);
}
}
.spin-animation {
animation: spin 2s linear forwards;
}
.item {
position: absolute;
bottom: 1rem;
right: 1rem;
font-size: 2rem;
color: red;
}
.axis {
position: absolute;
right: 0.8rem;
bottom: 1.2rem;
}
.y-axis {
width: 1px;
height: 300px;
background: black;
position: absolute;
right: 0;
bottom: 0;
}
.x-axis {
width: 300px;
height: 1px;
background: black;
}
.z-axis {
width: 1px;
height: 300px;
position: absolute;
right: 0;
bottom: 0;
background: black;
transform: skewX(45deg);
transform-origin: right bottom;
}
.z-axis span {
padding: 0.5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button onclick="reRun()">ReRun the Example</button>
<div class="item spin-animation">
<i class="fa fa-question" aria-hidden="true"></i>
</div>
<div class="axis">
<div class="y-axis"><span>Y</span></div>
<div class="x-axis"><span>X</span></div>
<div class="z-axis"><span>Z</span></div>
</div>
解决方案
在大多数情况下,顺序很重要。首先平移(它也改变旋转中心或轴)然后缩放然后旋转。
function reRun() {
document.querySelector('.item').classList.remove('spin-animation')
setTimeout(function() {
document.querySelector('.item').classList.add('spin-animation')
},300)
}
@keyframes spin {
0% {
transform: translate(0, 0) scale(1) rotateY(0deg);
}
25% {
transform: translate(-1rem, -1rem) scale(2) rotateY(360deg);
}
50% {
transform: translate(-1.5rem, -1.5rem) scale(3) rotateY(0deg);
}
75% {
transform: translate(-2rem, -2rem) scale(4) rotateY(360deg);
}
100% {
transform: translate(-2.5rem, -2.5rem) scale(5) rotateY(0deg);
}
}
.spin-animation {
animation: spin 2s linear forwards;
}
.item {
position: absolute;
bottom: 1rem;
right: 1rem;
font-size: 2rem;
color: red;
}
.axis {
position: absolute;
right: 0.8rem;
bottom: 1.2rem;
}
.y-axis {
width: 1px;
height: 300px;
background: black;
position: absolute;
right: 0;
bottom: 0;
}
.x-axis {
width: 300px;
height: 1px;
background: black;
}
.z-axis {
width: 1px;
height: 300px;
position: absolute;
right: 0;
bottom: 0;
background: black;
transform: skewX(45deg);
transform-origin: right bottom;
}
.z-axis span {
padding: 0.5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button onclick="reRun()">ReRun the Example</button>
<div class="item spin-animation">
<i class="fa fa-question" aria-hidden="true"></i>
</div>
<div class="axis">
<div class="y-axis"><span>Y</span></div>
<div class="x-axis"><span>X</span></div>
<div class="z-axis"><span>Z</span></div>
</div>
推荐阅读
- c# - 在 IIS 服务器上创建 X509Certificate2 对象时出错
- visual-studio-code - 使用父目录中的 jsconfig
- c - 如何在不冻结系统的情况下处理长中断
- javascript - angularjs 1.x 需要帮助,“长时间使用”
- reactjs - 在新选项卡中打开时如何访问通过链接元素传递的状态?
- javascript - 如何检测表单是否已提交?
- php - Laravel 项目链接上传后在 000webhost.com 上不起作用
- reactjs - 状态更改后在视频标签中添加控件属性
- python - 来自 Kafka 消息的日志偏移量、分区和主题
- python-3.x - python pandas左连接,左上索引,右上column_name