变换翻译废墟旋转轴

2022-10-15 10:30:30标签htmlcss
提问

当我使用平移时,它将从上中心到右上角的转换原点旋转轴改变。 所有的容器都是孩子们的大小。 然后旋转,确保你有一个正方形的图像。你使用的不是平方,这样你就可以用a比比来制造集装箱广场


#arrow {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform-origin: top center;
    transform: rotate(0deg) translateX(-50%);
}
<div id="depth">
   <img id="sensorImg" src="https://cdn.discordapp.com/attachments/282502094202732544/1000456309793116170/Depth_Flattened.svg" alt="depth"></img>    
   <img id="arrow" src="https://cdn.discordapp.com/attachments/282502094202732544/1000670507890389062/Polygon.png"></img> 
</div>
回答

#arrow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: top;
  transform: translateX(-50%) rotate(0deg);
  animation: a 3s linear infinite;
}
@keyframes a{
  to{transform: translateX(-50%) rotate(360deg)}
}
#depth {
  position: relative;
  display: inline-block;
  aspect-ratio: 1;
  border:1px solid red;
}
img {
  display:block;
}
<div id="depth">
  <img id="sensorImg" src="https://cdn.discordapp.com/attachments/282502094202732544/1000456309793116170/Depth_Flattened.svg" alt="depth">
  <img id="arrow" src="https://cdn.discordapp.com/attachments/282502094202732544/1000670507890389062/Polygon.png">
</div>

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5