ios 手机上 transform:rotateY闪现一下或者不显示

念了半位旧人

于 2024-01-23 15:14:41 发布

阅读量513

点赞数 5

文章标签： ios

本文链接：https://blog.csdn.net/Armof/article/details/135772360

版权

本文介绍了如何使用CSS3动画技术，通过`perspective`属性和自定义关键帧`@keyframes`，实现了一个活动标识的动态旋转和移动效果。

摘要由CSDN通过智能技术生成

<div class="cardty" >
    <div class="activit identifier">
        <div class="activit-ew"
          :style="pageImg.happyActivit">
        </div>
     </div>
</div>

**css样式**
.cardty{
	-webkit-perspective:500;
    perspective:500; // 在这里添加
    .activit {
    		width: 129px;
            height: 174px;
           // z-index: 25;
    }
	
}
.identifier {
      animation-name: identifier; /* 指定使用的关键帧名称 */
      animation-duration: 0.7s; /* 设置动画持续时间为2秒 */
      animation-iteration-count: 1; /* 无限次重复执行动画 */
      animation-fill-mode: forwards;
      animation-timing-function:cubic-bezier(
        0.2,
        0.02,
        0.9,
        0.99
      ); /* 线性变化速度函数 */
    }
@keyframes identifier{
    0% {
       transform:rotateY(-55deg) translateY(700px);
       -webkit-transform: rotateY(-55deg) translateY(700px);
       scale: (1.1);
       // transform: ;
     }
     92%{
       transform: translateY(250px) rotate(0deg);
       -webkit-transform: translateY(250px) rotateY(0deg) ;
       scale: (1.01);
     }
     100% {
       transform: translateY(150px) rotate(0deg);
       -webkit-transform: translateY(150px) rotateY(0deg);
       scale: (1);
     }
   }