3D旋转木马相册HTML+css

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

花~盗

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

阅读量850

点赞数 3

分类专栏： html html+css 文章标签： css html html5 css3 动画

本文链接：https://blog.csdn.net/ypf3442354429/article/details/122293993

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html+css

8 篇文章 0 订阅

订阅专栏

效果图如下

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋转木马相册</title>
</head>
<style>
    *{
        /*取消内外边距*/
        margin: 0;
        padding: 0;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000;
        /*视距让子元素看起来更有3D效果*/
        perspective: 900px;
    }
    section{
        position: relative;
        width: 200px;
        height: 300px;
        /*让其子元素位于3D空间中*/
        transform-style: preserve-3d;
        animation: rotate 20s linear infinite;
    }
    section div{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        /*与原照片的距离 倒影反射的方式 方向 是否透明 透明度 颜色*/
        -webkit-box-reflect: below 15px -webkit-gradient(linear, right top, right bottom,
        from(transparent), color-stop(0.4, transparent), to(black));
    }
    section:hover{
        animation-play-state: paused;
    }
    section div img{
        width: 100%;
        height: 100%;
    }
    section div:nth-child(1){
        transform: rotateY(0deg) translateZ(300px);
    }
    section div:nth-child(2){
        transform: rotateY(45deg) translateZ(300px);
    }
    section div:nth-child(3){
        transform: rotateY(90deg) translateZ(300px);
    }
    section div:nth-child(4){
        transform: rotateY(135deg) translateZ(300px);
    }
    section div:nth-child(5){
        transform: rotateY(180deg) translateZ(300px);
    }
    section div:nth-child(6){
        transform: rotateY(225deg) translateZ(300px);
    }
    section div:nth-child(7){
        transform: rotateY(270deg) translateZ(300px);
    }
    section div:nth-child(8){
        transform: rotateY(315deg) translateZ(300px);
    }
    @keyframes rotate {
        0%{
            transform: rotateY(0deg);
        }
        100%{
            transform: rotateY(360deg);
        }
    }
</style>
<body>
<section>
    <div><img src="img/1.jpeg"/></div>
    <div><img src="img/2.jpeg"/></div>
    <div><img src="img/3.jpeg"/></div>
    <div><img src="img/4.jpeg"/></div>
    <div><img src="img/5.jpeg"/></div>
    <div><img src="img/6.jpeg"/></div>
    <div><img src="img/7.jpeg"/></div>
    <div><img src="img/8.jpeg"/></div>
</section>
</body>
</html>