文章目录
前言
利用html css 写的一个简单的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>