css3动画炫酷旋转带你进入高端世界！！！

最新推荐文章于 2023-06-27 15:13:49 发布

星梦512

最新推荐文章于 2023-06-27 15:13:49 发布

阅读量276

点赞数

分类专栏： css基础选择器 css3动画文章标签： html css

本文链接：https://blog.csdn.net/li_3579/article/details/117754276

版权

css基础选择器同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css3动画

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.透视：perspective

**
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
格式有两种写法：
作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为 transform 属性的一个值，做用于元素自身。**

3D呈现（transform-style）

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下

定义动画的步骤

（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
(4)animation: 定义的动画名称持续时间执行次数是否反向运动曲线延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;

我们来看看能够无限旋转的效果

第一步基础结构
第二部实现图片基础样式
第三部实现3D效果
第四部让图片自动旋转

1.实现基础结构

<div class="box">
    <ul>
        <li><img src="./images/01.png" alt=""></li>
        <li><img src="./images/02.jpg" alt=""></li>
        <li><img src="./images/03.png" alt=""></li>
        <li><img src="./images/04.png" alt=""></li>
        <li><img src="./images/07.png" alt=""></li>
        <li><img src="./images/u=2446730486,2843148982&fm=26&gp=0.jpg" alt=""></li>
    </ul>
</div>

下一步要让图片聚集在一起让他居中
在这里插入图片描述
2.实现基础样式让它居住聚集在一起

{
margin: 0;
padding: 0;
}

  .box {
      width: 400px;
      height: 300px;
      margin: 150px auto;
      /* 上下150px  左右居中 */
  }
  
  ul {
      list-style: none;
      /* 清除小圆点 */
      /* 用子绝父相定位让图片聚集在一起 */
      position: relative;
  }
  
  li {
      position: absolute;
  }
  
  img {
      /* 图片大小不一样那么设置每一张图片一样大 */
      width: 400px;
      height: 300px;
  }

3.让每一张图片看起来像有距离感
用伪元素把每一张图片调整：
下面的图片
在这里插入图片描述

4.让图片自动旋转
看看最终的效果：
这是效果的全部代码：

         <!DOCTYPE html>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        perspective: 800px;
    }
    /* 用 @keyframes让图片动起来 */
    
    @keyframes go {
        0% {
            transform: rotateY(0deg)
        }
        100% {
            transform: rotateY(360deg)
        }
    }
    
    .box {
        width: 400px;
        height: 300px;
        margin: 150px auto;
        /* 上下150px  左右居中 */
        transform-style: preserve-3d;
        /* 用transform-style: preserve-3d;转化成3D效果 */
        animation: go 3s linear infinite;
        /* 让图片3秒转一圈   infinite无限的意思让图片无限次数转圈 */
    }
    
    ul {
        height: 300px;
        list-style: none;
        /* 清除小圆点 */
        /* 用子绝父相定位让图片聚集在一起 */
        position: relative;
    }
    
    li {
        position: absolute;
    }
    
    img {
        /* 图片大小不一样那么设置每一张图片一样大 */
        width: 400px;
        height: 300px;
    }
    
    ul li:nth-of-type(1) img {
        transform: rotateY(60deg) translateZ(400px);
    }
    
    .box ul li:nth-of-type(2) img {
        transform: rotateY(120deg) translateZ(400px);
    }
    
    .box ul li:nth-of-type(3) img {
        transform: rotateY(180deg) translateZ(400px);
    }
    
    .box ul li:nth-of-type(4) img {
        transform: rotateY(240deg) translateZ(400px);
    }
    
    .box ul li:nth-of-type(5) img {
        transform: rotateY(300deg) translateZ(400px);
    }
    
    .box ul li:nth-of-type(6) img {
        transform: rotateY(360deg) translateZ(400px);
    }
</style>

<div class="box">
    <ul>
        <li><img src="./images/01.png" alt=""></li>
        <li><img src="./images/02.jpg" alt=""></li>
        <li><img src="./images/03.png" alt=""></li>
        <li><img src="./images/04.png" alt=""></li>
        <li><img src="./images/07.png" alt=""></li>
        <li><img src="./images/u=2446730486,2843148982&fm=26&gp=0.jpg" alt=""></li>
    </ul>
</div>