前端CSS实现旋转相册

最新推荐文章于 2024-11-04 19:39:43 发布

前端尨猫

最新推荐文章于 2024-11-04 19:39:43 发布

阅读量440

点赞数

分类专栏：前端学习之路文章标签： html5 css3 前端

本文链接：https://blog.youkuaiyun.com/qq_43954443/article/details/119898697

版权

前端学习之路专栏收录该内容

39 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转相册</title>
    <style>
        html{
            height: 100%;
            background: url(../images/bj1.jpg) no-repeat;
            background-size: 100% 100%;
        }
        section{
            width: 300px;
            height: 400px;
            margin: 200px auto;
            position: fixed;
            top: 0;right: 0;bottom: 0;left: 0;
            background:url(../images/a.gif) no-repeat center;
            transform-style: preserve-3d;
            transform: rotate(1,1,0,30deg);
            animation: xf 8s linear infinite
        }
        img{
            width: 300px;
            height: 400px;
            position: absolute;
            /* 变形原点 */
            transform-origin: center center -400px;
        }
        img:nth-child(1){
            transform: translateZ(400px) rotateY(36deg)
        }
        img:nth-child(2){
            transform: translateZ(400px) rotateY(72deg)
        }
        img:nth-child(3){
            transform: translateZ(400px) rotateY(108deg)
        }
        img:nth-child(4){
            transform: translateZ(400px) rotateY(144deg)
        }
        img:nth-child(5){
            transform: translateZ(400px) rotateY(180deg)
        }
        img:nth-child(6){
            transform: translateZ(400px) rotateY(216deg)
        }
        img:nth-child(7){
            transform: translateZ(400px) rotateY(252deg)
        }
        img:nth-child(8){
            transform: translateZ(400px) rotateY(288deg)
        }
        img:nth-child(9){
            transform: translateZ(400px) rotateY(324deg)
        }
        img:nth-child(10){
            transform: translateZ(400px) rotateY(360deg)
        }
        @keyframes xf{
            0%{transform:rotateX(30deg) rotateY(0deg)}
            25%{transform:rotateX(30deg) rotateY(90deg)}
            50%{transform:rotateX(30deg) rotateY(180deg)}
            75%{transform:rotateX(30deg) rotateY(270deg)}
            100%{transform:rotateX(30deg) rotateY(360deg)}
        }
    </style>
</head>
<body>
    <section>
        <img src="../images/pic1.png" alt="">
        <img src="../images/pic2.png" alt="">
        <img src="../images/pic3.png" alt="">
        <img src="../images/pic4.png" alt="">
        <img src="../images/pic5.png" alt="">
        <img src="../images/pic6.png" alt="">
        <img src="../images/pic7.png" alt="">
        <img src="../images/pic8.png" alt="">
        <img src="../images/pic9.png" alt="">
        <img src="../images/pic10.png" alt="">
    </section>
</body>
</html>
<!--  -->