一个简单的3D旋转木马相册

最新推荐文章于 2024-03-19 12:10:10 发布

Kong_十六

最新推荐文章于 2024-03-19 12:10:10 发布

阅读量993

点赞数 1

分类专栏： # 练习实例 # H5+C3 文章标签： Html5 css3 转换动画

本文链接：https://blog.csdn.net/qq_42383764/article/details/105040474

版权

练习实例同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

H5+C3

10 篇文章 0 订阅

订阅专栏

3d旋转木马相册算是H5和C3的一个简单的综合案例，主要是使用3d转换实现的。

3d中最重要的核心点：就是透视、3d呈现 —— perspective 和 transform-style：preserve-3d。

案例的主要核心技术点：3d转换+动画

案例制作分析

这个旋转木马的相册其实就是一个多面立方图，简单点的话可以把它看成一个正方体来分析。相册中不同的照片都放在一个容器中，所以我们需要使用定位来让照片叠在一起，然后用3d转换中的Z轴来控制位置。正方体的中心点在最中间，为了使旋转点在中心点，我们需要把每个面都使用translateZ移出同样的距离，当然使用了3d转换就需要保留元素的3d呈现效果，所以要记得给要保留3d效果元素的父元素添加transform-style属性。要想有近大远小的立体感，要给父级元素添加透视

还有一点需要注意：在写转换组合时，移动需要写在最前面，是指XY轴的移动，如果是移动Z轴则不需要。这里就是先把每一面的照片旋转好位置，再去调整Z轴的距离。

先看一下，做出来的效果。

这是整个静态的效果，要想让它旋转起来，需要添加动画效果的。

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转木马版相册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 最后旋转的是section 也需要近大远小的效果 div也需要 所以透视放在body上 */
            perspective: 1000px;
        }

        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            /* 让子元素div保持3d效果 */
            transform-style: preserve-3d;
            animation: rotate 15s linear infinite;
            background: url(images/5.jpg) no-repeat;
        }

        section:hover {
            /* 当鼠标经过section时  动画停止 */
            animation-play-state: paused;
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0)
            }

            100% {
                transform: rotateY(360deg);
            }

        }

        section div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            /* background: url(images/3.jpg) no-repeat; */
        }

        section div:nth-child(1) {
            /* 第一张图片 */
            background: url(images/1.jpg) no-repeat;
            transform: rotateY(0deg) translateZ(400px);
        }

        section div:nth-child(2) {
            background: url(images/2.jpg) no-repeat;
            /* 先旋转好位置  再移动 这里是移动Z轴 不是xy轴  所以不用严格要求把位移放在最前面 */
            transform: rotateY(60deg) translateZ(400px);
        }

        section div:nth-child(3) {
            background: url(images/3.jpg) no-repeat;
            transform: rotateY(120deg) translateZ(400px);
        }

        section div:nth-child(4) {
            background: url(images/4.jpg) no-repeat;
            transform: rotateY(180deg) translateZ(400px);
        }

        section div:nth-child(5) {
            background: url(images/5.jpg) no-repeat;
            transform: rotateY(240deg) translateZ(400px);
        }

        section div:nth-child(6) {
            background: url(images/dog.jpg) no-repeat;
            transform: rotateY(300deg) translateZ(400px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

最后附上一个我做案例的图片

Kong_十六

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
一个简单的3D旋转木马相册

3d旋转木马相册算是H5和C3的一个简单的综合案例，主要是使用3d转换实现的。3d中最重要的核心点：就是透视、3d呈现—— perspective 和 transform-style：preserve-3d。案例的主要核心技术点：3d转换+动画案例制作分析这个旋转木马的相册其实就是一个多面立方图，简单点的话可以把它看成一个正方体来分析。相册中不同的照片都放在一个容器中，所以...
复制链接

扫一扫