旋转相册(html+css实现)

最新推荐文章于 2024-06-12 00:39:09 发布

一览星梦辰

最新推荐文章于 2024-06-12 00:39:09 发布

阅读量127

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_71242735/article/details/129865816

版权

这篇博客详细介绍了如何利用HTML和CSS技术实现一个旋转相册效果，包括展示效果图，以及分别提供CSS和HTML的代码实现。

摘要由CSDN通过智能技术生成

文章目录

旋转相册(html+css实现)

旋转相册(html+css实现)

效果图

css代码

 body {
   
            background:linear-gradient(to top,rgb(207, 76, 76),rgb(93, 93, 206),rgb(130, 244, 130));
        }
        .box {
   
            width: 200px;
            height: 200px;
            /* border:1px solid red; */
            position:relative;
            margin:300px auto;
            transform-style: preserve-3d;
        }
        .box-1 {
   
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            animation:myrotation 6s linear infinite;
        }
        .box-1>img {
   
            width: 100%;
            height: 100%;
        }
        .left {
   
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right {
   
            transform: translateX(100px) rotateY(90deg);
        }
        .top {
   
            transform: translateY(-100px) rotateX(-90deg);
        }
        .bottom {
   
            transform: translateY(100px) rotateX(90deg);
        }
        .front {
   
            transform: translateZ(100px);
        }
        .behind