.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);
将图片先摆放到到合适的角度 transform: rotate3d(x,y,z,angle)
再使用 animation 让其进行旋转
                    用css实现图片斜侧着旋转效果一、原始图一、最终效果图      底部图片例子：一、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; 
				
一、2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform transform 变换 变形的意思 《 transformers 变形金刚》
1、移动 translate(x, y)
tr...
				
一些废话：
很久没有更博了，主要原因是由于使用git工具push的时候，自己的私人账号和工作的git账号总是冲突，每次明明切换过了账号，可是push的时候却用的是错误的账号，找不到解决办法。最近得知github有桌面版，终于不会再冲突了！
最近工作上遇到一个项目有两张banner，都需要实现围绕椭圆旋转的动画效果。
				
一、Z轴平移
z轴平移，调整元素在z轴的位置，正常情况下调整元素和人眼之间的距离，距离越大，元素离人越近，z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看到效果，必须要设置网页的视距
1:设置视距
—perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px
—设置方式一
html{ perspective: 800px; }
—设置方式二：
—perspective(800px) 谷歌要直接设置在tra
				
要实现盒子沿着 Z 轴旋转 360 度，可以使用 CSS 的 transform 属性中的 rotateZ() 函数。rotateZ() 函数用于沿着 Z 轴旋转元素。
以下是一个示例代码：
```css
.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: rotateZ(0deg);
  animation: rotate 4s linear infinite;
@keyframes rotate {
    transform: rotateZ(0deg);
  100% {
    transform: rotateZ(360deg);
上述代码中，通过定义一个名为 rotate 的关键帧动画，使盒子元素在 4 秒内从初始状态旋转到终止状态，绕着 Z 轴顺时针旋转 360 度。然后通过 animation 属性将动画应用到盒子元素上，并设置为无限循环。
你可以自定义盒子的样式和动画的持续时间，根据需要进行调整。