浅谈css3的3D动画效果并制作一个简单的旋转照片墙

本文链接：https://blog.csdn.net/qq_45687086/article/details/124787254

各位读者大家好，我是一只小菜鸟。目前正在学习web前端方面的相关知识.，这也是小菜鸟第一次写博客。写的有哪里不对的地方欢迎各位指正。

本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动画效果做出一个立体旋转的照片墙。效果如下图.

想要做成这样的效果其实是很简单的，在开始做之前了，我们先来了解一下它的原理吧！首先就是利用定位将图片居中显示，其次利用3D空间效果将图片位移到对应的位置上再加上一点偏转角度，然后就可以定义一个动画，规定动画的运转就可以了。下面是代码。

css代码：

/* 去除所有标签的内外边距 */

* {
    margin: 0;
    padding: 0;
}


/* 给body设置一个背景 */

body {
    /* 引入背景图片 */
    background: url(../image/7.jpg) no-repeat;
    /* 让背景图充满这个屏幕 */
    background-size: 100%;
}

.box {
    /* 给父盒子设置相对定位 */
    position: relative;
    width: 400px;
    height: 400px;
    margin: 100px auto;
    /* 开启3d效果， */
    transform-style: preserve-3d;
    transform: rotate(30deg);
    /* 调用动画 */
    animation: move 8s linear infinite;
}

.box1 {
    position: relative;
    width: 400px;
    height: 400px;
    transform-style: preserve-3d;
    animation: run 8s linear infinite;
}

.box div {
    /* 给子盒子设置绝对定位，方便更改其位置 */
    position: absolute;
    width: 400px;
    height: 400px;
}

.box div img {
    width: 400px;
    height: 400px;
}


/* 利用3D空间转换，将图片定位到相应位置 */

.one {
    transform: translateZ(400px);
}

.two {
    transform: translateZ(200px) translateX(400px) rotateY(60deg);
}

.three {
    transform: translateZ(200px) translateX(-400px) rotateY(-60deg);
}

.four {
    transform: translateZ(-200px) translateX(400px) rotateY(-60deg);
}

.five {
    transform: translateZ(-200px) translateX(-400px) rotateY(60deg);
}

.six {
    transform: translateZ(-400px);
}


/* 定义动画 */

@keyframes move {
    0% {
        transform: rotateX(30deg);
    }
    50% {
        transform: rotateX(-30deg);
    }
    100% {
        transform: rotateX(30deg);
    }
}

/* 定义动画 */

@keyframes run {
    100% {
        transform: rotateY(-360deg);
    }
}

.box:hover {
    animation-play-state: paused;
}

.box:hover .box1 {
    animation-play-state: paused;
}

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入index.css样式表 -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class="one"><img src="./image/1.jpg"></div>
            <div class="two"><img src="./image/2.jpg"></div>
            <div class="three"><img src="./image/3.jpg"></div>
            <div class="four"><img src="./image/4.jpg"></div>
            <div class="five"><img src="./image/5.jpg"></div>
            <div class="six"><img src="./image/6.jpg"></div>
        </div>

    </div>
</body>

</html>

以上就是全部代码，图片之类的小伙伴们可以在网上找几张自己喜欢的。其实这种效果是比较简单的一种，只需要简单的将图片移到对应位置，在为其添加一点动画就能做到。这里运用的就是CSS3的transform和animation两个属性值。我在这里为大家简单的介绍一下这两个属性吧。

transform3d转换属性介绍：

3d转换（空间转换）就是使用transform属性实现元素在空间内的位移、旋转、缩放等效果。

一.3D坐标系：

3D 坐标系比2D 多了一个Z轴。这是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

一定要记住3个坐标轴取值的正反：

X 轴往右越大，是正值，否则反之
Y 轴往下越大，是正值，否则反之
Z轴（指向我们）越大，是正值，否则反之

二、属性：transform

(1).3D位移： transform: translate3d(x, y, z);这是完整写法，当然了我们一般不采用完整写法，更多的情况我们采用分开的写法。

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

(2)、透视。

a、作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果。当我们为元素添加Z轴方向的位移时为了更好的去观察元素的变化，会为其添加透视效果

b、语法： perspective: 800px;

注意点：

i、取值范围经常在 800px ~ 1200px 之间。

ii、一定给父亲添加

iii、透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

其中 d 为透视的距离

z 是 translateZ 的距离，这个距离靠近我们，盒子越大

(3)、3D旋转

a、rotateX（类似体操单杠）

效果展示:

(b)、rotateY（类似钢管舞）

效果展示

注意点：1、默认的旋转中心在盒子的中心位置。

2、取值正负值都可以单位为deg 如transfrm：rotateY（90deg）；取值正负不同旋转方向不同。我们一般用左手来判断其旋转方向

规则：

大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向
大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

要想体现3D效果，我们则要给父盒子开启3D效果：transform-style: preserve-3d;

animation动画属性介绍：

一、特点：可以不用鼠标触发，自动的，反复的执行某些动画。

二、使用：

1.定义：

@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

或者

 /* 1. 定义的动画 */
/* @keyframes为关键字  dance是动画名称（可以按照自己喜好随意取名）*/
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

2、调用

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

三、属性：

1、书写顺序：

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinite 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行
steps帧动画

2.帧动画演示

代码快

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 140px;
            height: 140px;
            margin: 100px auto;
            background: url(../老师的资料/images/bg.png);
            animation: run 1.5s steps(12) infinite, move 4s forwards;
        }
        
        @keyframes run {
            100% {
                background-position: -1680px;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

这个是引用的背景图片，有兴趣的小伙伴可以尝试一下。

3、动画连写

在写代码时，有时候一个元素肯定运用的不止一个动画，如果在重新调用，后调用的动画肯定会覆盖前面调用的动画，所以这个时候动画连写的作用就体现出来了，这个是书写格式。

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

4.动画暂停

.box:hover ul {
/*动画暂停属性*/
    animation-play-state: paused;
}

以上就是我的分享，希望对大家有那么一点点的帮助。