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

最新推荐文章于 2024-07-22 19:12:50 发布

这有一个菜鸟

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量3.9k

点赞数 8

文章标签：动画 css3 css html

本文链接：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&#

最低0.47元/天解锁文章

这有一个菜鸟

关注

8
点赞
踩
74

收藏

觉得还不错? 一键收藏
1
评论
浅谈css3的3D动画效果并制作一个简单的旋转照片墙

各位读者大家好，我是一只小菜鸟。目前正在学习web前端方面的相关知识.，这也是小菜鸟第一次写博客。写的有哪里不对的地方欢迎各位指正。本篇文章内容就是利用HTML简单的布局再加上CSS3的动画效果做出一个立体旋转的照片墙。效果如下图...
复制链接

扫一扫