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

在这里插入图片描述

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>

因为内存超过5mb所以上传不到动起来的效果.请理解
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值