3D旋转相册1.0

其他 2021-11-22 03:14:24 阅读次数: 0

文章目录

前言

利用html css 写的一个简单的3D旋转相册，使用了媒体查询，可以适用于手机平板电脑

提示：以下是本篇文章正文内容，下面案例可供参考

一、3D旋转相册演示

3D旋转相册
3D旋转相册
体验网址：3D旋转相册

二、3D旋转相册源代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,max-width=1.0,min-width=1.0">
    <title>3D立方体相册</title>
    <style>
		/*清空各个元素的内外边距*/
        * {
      
      
            margin: 0;
            padding: 0;
        }
		/*给页面设置背景 有黑色或者是打注释的渐变色*/
        body {
      
      
            width: 100%;
            height: 100%;
            background-color: black;
            /* background: radial-gradient(#ccc, rgb(5, 1, 36)); */
        }
		/*下面使用媒体查询 在不同的屏幕（例如手机、平板、电脑）下显示不同*/
        @media screen and (min-width:320px) {
      
      /*在手机下*/
        /*设置一个外面最大的盒子 （便于将所有图片放进去，最后只需要转动这个大盒子就可以实现所有图片的转动）*/
            .wrap {
      
      
                position: relative;/*子绝父相*/
                width: 100px;
                height: 100px;
                margin: 200px auto;
                transform-style: preserve-3d;/*将子元素设置3d*/
                animation: rotate 10s linear infinite;/*给盒子一个动画，让它转动起来*/
            }
			/*设置图片大小位置 定位要设置成绝对定位（绝对定位不占位置）*/
            .wrap span {
      
      
                position: absolute;
                top: 25px;
                left: 25px;
                display: block;/*因为span是行内块元素，要转换成块级元素*/
                width: 100%;
                height: 100%;
                /* background: url(../media/77.jpg) no-repeat; */
            }
			/*下面是用图片拼成里面正方形*/
            #in-front {
      
      
                transform: translateZ(50px);
                background: url(media/3d1.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-back {
      
      
                transform: rotateY(180deg) translateZ(50px);
                background: url(media/3d2.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-left {
      
      
                transform: rotateY(-90deg) translateZ(50px);
                background: url(media/3d3.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-right {
      
      
                transform: rotateY(90deg) translateZ(50px);
                background: url(media/3d4.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-top {
      
      
                transform: rotateX(90deg) translateZ(50px);
                background: url(media/3d5.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-bottom {
      
      
                transform: rotateX(-90deg) translateZ(50px);
                background: url(media/3d6.jpg) no-repeat;
                background-size: 100px 100px;
            }
			/*设置一个盒子装外面的正方形*/
            .wrap div {
      
      
                width: 150px;
                height: 150px;
                background-color: pink;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.7;/*设置透明度*/
            }
			/*将外面的正方形用盒子拼起来*/
            #out-front {
      
      
                transform: translateZ(75px);
                background: url(media/31.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-back {
      
      
                transform: rotateY(180deg) translateZ(75px);
                background: url(media/32.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-left {
      
      
                transform: rotateY(-90deg) translateZ(75px);
                background: url(media/33.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-right {
      
      
                transform: rotateY(90deg) translateZ(75px);
                background: url(media/34.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-top {
      
      
                transform: rotateX(90deg) translateZ(75px);
                background: url(media/35.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-bottom {
      
      
                transform: rotateX(-90deg) translateZ(75px);
                background: url(media/36.jpg) no-repeat;
                background-size: 150px 150px;
            }
			/*鼠标经过外面的正方形的每个图片都会向外移动100px*/
            .wrap:hover #out-front {
      
      
                transform: translateZ(100px);
            }

            .wrap:hover #out-back {
      
      
                transform: rotateY(180deg) translateZ(100px);
            }

            .wrap:hover #out-left {
      
      
                transform: rotateY(-90deg) translateZ(100px);
            }

            .wrap:hover #out-right {
      
      
                transform: rotateY(90deg) translateZ(100px);
            }

            .wrap:hover #out-top {
      
      
                transform: rotateX(90deg) translateZ(100px);
            }

            .wrap:hover #out-bottom {
      
      
                transform: rotateX(-90deg) translateZ(100px);
            }

            .wrap:hover #out-front {
      
      
                transform: translateZ(100px);
            }

            .wrap:hover #out-back {
      
      
                transform: rotateY(180deg) translateZ(100px);
            }

            .wrap:hover #out-left {
      
      
                transform: rotateY(-90deg) translateZ(100px);
            }

            .wrap:hover #out-right {
      
      
                transform: rotateY(90deg) translateZ(100px);
            }

            .wrap:hover #out-top {
      
      
                transform: rotateX(90deg) translateZ(100px);
            }

            .wrap:hover #out-bottom {
      
      
                transform: rotateX(-90deg) translateZ(100px);
            }
        }

        @media screen and (min-width:768px) {
      
      /*在平板下*/
       		 /*设置一个外面最大的盒子 （便于将所有图片放进去，最后只需要转动这个大盒子就可以实现所有图片的转动）*/
            .wrap {
      
      
                position: relative;
                width: 100px;
                height: 100px;
                margin: 200px auto;
                transform-style: preserve-3d;/*将子元素设置3d*/
                animation: rotate 10s linear infinite;/*给盒子一个动画，让它转动起来*/
            }

            .wrap span {
      
      
                position: absolute;
                top: 25px;
                left: 25px;
                display: block;
                width: 100%;
                height: 100%;
                /* background: url(../media/77.jpg) no-repeat; */
            }
			/*设置图片大小位置 定位要设置成绝对定位（绝对定位不占位置）*/
            #in-front {
      
      
                transform: translateZ(50px);
                background: url(media/3d1.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-back {
      
      
                transform: rotateY(180deg) translateZ(50px);
                background: url(media/3d2.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-left {
      
      
                transform: rotateY(-90deg) translateZ(50px);
                background: url(media/3d3.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-right {
      
      
                transform: rotateY(90deg) translateZ(50px);
                background: url(media/3d4.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-top {
      
      
                transform: rotateX(90deg) translateZ(50px);
                background: url(media/3d5.jpg) no-repeat;
                background-size: 100px 100px;
            }

            #in-bottom {
      
      
                transform: rotateX(-90deg) translateZ(50px);
                background: url(media/3d6.jpg) no-repeat;
                background-size: 100px 100px;
            }
			/*将外面的正方形用盒子拼起来*/
            .wrap div {
      
      
                width: 150px;
                height: 150px;
                background-color: pink;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.7;
            }

            #out-front {
      
      
                transform: translateZ(75px);
                background: url(media/31.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-back {
      
      
                transform: rotateY(180deg) translateZ(75px);
                background: url(media/32.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-left {
      
      
                transform: rotateY(-90deg) translateZ(75px);
                background: url(media/33.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-right {
      
      
                transform: rotateY(90deg) translateZ(75px);
                background: url(media/34.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-top {
      
      
                transform: rotateX(90deg) translateZ(75px);
                background: url(media/35.jpg) no-repeat;
                background-size: 150px 150px;
            }

            #out-bottom {
      
      
                transform: rotateX(-90deg) translateZ(75px);
                background: url(media/36.jpg) no-repeat;
                background-size: 150px 150px;
            }
			/*鼠标经过外面的正方形的每个图片都会向外移动100px*/
            .wrap:hover #out-front {
      
      
                transform: translateZ(100px);
            }

            .wrap:hover #out-back {
      
      
                transform: rotateY(180deg) translateZ(100px);
            }

            .wrap:hover #out-left {
      
      
                transform: rotateY(-90deg) translateZ(100px);
            }

            .wrap:hover #out-right {
      
      
                transform: rotateY(90deg) translateZ(100px);
            }

            .wrap:hover #out-top {
      
      
                transform: rotateX(90deg) translateZ(100px);
            }

            .wrap:hover #out-bottom {
      
      
                transform: rotateX(-90deg) translateZ(100px);
            }

            .wrap:hover #out-front {
      
      
                transform: translateZ(200px);
            }

            .wrap:hover #out-back {
      
      
                transform: rotateY(180deg) translateZ(200px);
            }

            .wrap:hover #out-left {
      
      
                transform: rotateY(-90deg) translateZ(200px);
            }

            .wrap:hover #out-right {
      
      
                transform: rotateY(90deg) translateZ(200px);
            }

            .wrap:hover #out-top {
      
      
                transform: rotateX(90deg) translateZ(200px);
            }

            .wrap:hover #out-bottom {
      
      
                transform: rotateX(-90deg) translateZ(200px);
            }
        }


        @media screen and (min-width:1170px) {
      
      /*在电脑下*/
			/*设置一个外面最大的盒子 （便于将所有图片放进去，最后只需要转动这个大盒子就可以实现所有图片的转动）*/
            .wrap {
      
      
                position: relative;
                width: 200px;
                height: 200px;
                margin: 200px auto;
                transform-style: preserve-3d;/*将子元素设置3d*/
                animation: rotate 10s linear infinite;/*给盒子一个动画，让它转动起来*/
            }
			/*设置图片大小位置 定位要设置成绝对定位（绝对定位不占位置）*/
            .wrap span {
      
      
                position: absolute;
                top: 50px;
                left: 50px;
                display: block;/*因为span是行内块元素，要转换成块级元素*/
                width: 100%;
                height: 100%;
                /* background: url(../media/77.jpg) no-repeat; */
            }
			/*下面是用图片拼成里面正方形*/
            #in-front {
      
      
                transform: translateZ(100px);
                background: url(media/3d1.jpg) no-repeat;
            }

            #in-back {
      
      
                transform: rotateY(180deg) translateZ(100px);
                background: url(media/3d2.jpg) no-repeat;
            }

            #in-left {
      
      
                transform: rotateY(-90deg) translateZ(100px);
                background: url(media/3d3.jpg) no-repeat;
            }

            #in-right {
      
      
                transform: rotateY(90deg) translateZ(100px);
                background: url(media/3d4.jpg) no-repeat;
            }

            #in-top {
      
      
                transform: rotateX(90deg) translateZ(100px);
                background: url(media/3d5.jpg) no-repeat;
            }

            #in-bottom {
      
      
                transform: rotateX(-90deg) translateZ(100px);
                background: url(media/3d6.jpg) no-repeat;
            }
			/*设置一个盒子装外面的正方形*/
            .wrap div {
      
      
                width: 300px;
                height: 300px;
                background-color: pink;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.7;
            }
			/*将外面的正方形用盒子拼起来*/
            #out-front {
      
      
                transform: translateZ(150px);
                background: url(media/31.jpg) no-repeat;
            }

            #out-back {
      
      
                transform: rotateY(180deg) translateZ(150px);
                background: url(media/32.jpg) no-repeat;
            }

            #out-left {
      
      
                transform: rotateY(-90deg) translateZ(150px);
                background: url(media/33.jpg) no-repeat;
            }

            #out-right {
      
      
                transform: rotateY(90deg) translateZ(150px);
                background: url(media/34.jpg) no-repeat;
            }

            #out-top {
      
      
                transform: rotateX(90deg) translateZ(150px);
                background: url(media/35.jpg) no-repeat;
            }

            #out-bottom {
      
      
                transform: rotateX(-90deg) translateZ(150px);
                background: url(media/36.jpg) no-repeat;
            }
			/*鼠标经过外面的正方形的每个图片都会向外移动100px*/
            .wrap:hover #out-front {
      
      
                transform: translateZ(200px);
            }

            .wrap:hover #out-back {
      
      
                transform: rotateY(180deg) translateZ(200px);
            }

            .wrap:hover #out-left {
      
      
                transform: rotateY(-90deg) translateZ(200px);
            }

            .wrap:hover #out-right {
      
      
                transform: rotateY(90deg) translateZ(200px);
            }

            .wrap:hover #out-top {
      
      
                transform: rotateX(90deg) translateZ(200px);
            }

            .wrap:hover #out-bottom {
      
      
                transform: rotateX(-90deg) translateZ(200px);
            }
        }


		/*这个是设置的一个动画 让盒子转起来*/
        @keyframes rotate {
      
      
            from {
      
      
                transform: rotateX(0deg) rotateY(0deg);
            }

            to {
      
      
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
	<!--调用音乐-->
    <audio src="media/刘大壮 - 我很好 (DJ版).mp3" autoplay="autoplay" loop="loop" controls="controls"></audio>
    <div class="wrap">
        <span id="in-front"></span>
        <span id="in-back"></span>
        <span id="in-top"></span>
        <span id="in-bottom"></span>
        <span id="in-left"></span>
        <span id="in-right"></span>
        <div id="out-front"></div>
        <div id="out-back"></div>
        <div id="out-top"></div>
        <div id="out-bottom"></div>
        <div id="out-left"></div>
        <div id="out-right"></div>
    </div>
</body>

</html>

三、所需要的文件

链接：https://gitee.com/user1542043226/a3dpicture

猜你喜欢

转载自blog.csdn.net/qq_45879198/article/details/119972721
今日推荐
周排行
部署LNMP环境 地址重写 HTTPS加密网站
生物智能与AI——关乎创造、关乎理解（下）
angular项目随笔——前端实现实时搜索展示搜索列表
InsertionSort_插入排序
git版本控制相关命令
PowerPC-object与elf中的符号引用
flex布局和传统布局的区别
现行各主流语言的特点
用“互联网+大数据”打造智慧政府
JS专题之节流函数
每日归档
更多
2025-01-08(0)
2025-01-07(0)
2025-01-06(0)
2025-01-05(0)
2025-01-04(0)
2025-01-03(0)
2025-01-02(0)
2025-01-01(0)
2024-12-31(0)
2024-12-30(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022