css animation 图片65%角旋转,沿着z轴旋转

原创已于 2022-01-28 10:49:16 修改 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css3

于 2022-01-28 10:48:19 首次发布

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS实现图片沿Z轴倾斜并旋转的视觉效果。通过设置transform属性及关键帧动画，使图片沿特定角度展示，并实现无限循环旋转。

用css实现图片斜侧着沿着z轴旋转效果

一、原始图

在这里插入图片描述

一、最终效果图

效果图在这里插入图片描述
底部图片例子：

一、html代码

 <div class="active-box" v-show="index == activeIndex">
    <img src="../assets/imgs/home/photosphere.png" class="active-img" />
</div>

二、css

 .active-box{
          width: 280px;
          height: 280px;
          //沿着x轴旋转65度
          transform: rotate3d(1, 0, 0, 65deg); //rotate3d(x,y,z,angle)
          img{
            width: 100%;
            height: 100%;
            animation: zhuan 10s infinite linear;
          }
   }
 @keyframes zhuan {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}