如何用CSS3转换、动画制作旋转相册，立方体相册

最新推荐文章于 2022-09-30 08:39:09 发布

清欢灬

最新推荐文章于 2022-09-30 08:39:09 发布

阅读量252

点赞数

文章标签： animation html css css3

本文链接：https://blog.csdn.net/a754334599/article/details/111332575

版权

一、3D转换制作旋转相册

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
        
        body {
            background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
        }
        
        .box {
            width: 600px;
            height: 340px;
            position: absolute;
            top: 50%;
            margin-top: -170px;
            left: 50%;
            margin-left: -300px;
            transform-style: preserve-3d;
            transition: all 500s;
            transform: rotateX(-5deg);
            animation: turn 10s linear infinite;
        }
        
        .item {
            position: absolute;
            left: 0;
            top: 0;
            width: 600px;
            height: 340px;
            background-size: 600px;
        }
        /* 正面 */
        
        .item:nth-child(1) {
            background-image: url(./img/2.jpg);
            transform: translateZ(600px);
        }
        /* 后面 */
        
        .item:nth-child(2) {
            background-image: url(./img/m1.jpg);
            transform: translateZ(-600px);
        }
        /* 左后 */
        
        .item:nth-child(3) {
            background-image: url(./img/3.jpg);
            transform: rotateY(60deg) translateZ(-600px);
        }
        /* 左前 */
        
        .item:nth-child(4) {
            background-image: url(./img/4.jpg);
            transform: rotateY(-60

最低0.47元/天解锁文章

清欢灬

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何用CSS3转换、动画制作旋转相册，立方体相册

一、3D转换制作旋转相册<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫