3D旋转相册

明思齐

已于 2023-03-06 09:16:07 修改

阅读量191

点赞数

文章标签： 3d css css3

于 2023-03-03 18:07:56 首次发布

本文链接：https://blog.csdn.net/m0_61911999/article/details/129317419

版权

背景

该3D旋转相册项目是基于eclipse工具开发的，其创建的是一个JavaWeb项目。

操作步骤

在eclipse中创建一个JavaWeb项目photoalbum(File -> New -> Dynamic Web Project )
创建成功之后，在WebContent中创建css和images文件；css文件中创建style.css，images文件中导入你想放置的图片(图片最好是大小一致)
将photo.jsp创建至WebContent中

代码

style.css

/**/
#wrap span{
    display: block;
    width:100px;
    height:100px;
    background-color: rgb(10, 118, 212);
    /*将盒子放置中间*/
    position: absolute;
    top:50px;
    left:50px;
}
/**/
#wrap{
    width: 100px;
    height:100px;
    margin:300px auto;
    /*设置旋转时间*/
    animation: rotate 20s infinite;
    /*设置3d效果*/
    transform-style:preserve-3d ;
}

#wrap span img{
    width:100px;
    height:100px;
}
/*
	设置旋转动画效果
*/
#in-front{
    transform: translateZ(50px);
}

#in-back{
    transform: translateZ(-50px);
}

#in-left{
    transform: rotateY(90deg)  translateZ(50px);
}

#in-right{
    transform:  rotateY(-90deg) translateZ(50px);
}

#in-top{
    transform:   rotateX(90deg) translateZ(50px);
}

#in-bottom{
    transform:  rotateX(-90deg) translateZ(50px);
}

@keyframes rotate{
    from{
        transform: rotateX(0deg)  rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
    }
}
/*框架大小*/
#wrap div{
    width:200px;
    height:200px;
    background-color: brown;
    position: absolute;
}
/* 图片大小*/
#wrap div img{
    width:200px;
    height:200px;
}

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

#out-back{
    transform: translateZ(-100px);
}

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

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

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

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

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

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

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

#wrap:hover #out-back{
    transform: translateZ(-150px);
}

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

网站背景图等比缩放，不变形：background: url("images/xx.jpg");

图片不重复：background-repeat: no-repeat;

background-position: center center; // 第一个值：水平位置第二个值：垂直位置（x轴y轴都居中对齐）【等同于 background-position: center; 】

background-attachment: fixed; // 当页面的其余部分滚动时，背景图像不会移动。

Team.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D旋转相册</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
	.body{
    	background: url("images/x15.jpg") no-repeat center center fixed;
                /* 将图片缩放到正好完全覆盖定义背景的区域 */
                -webkit-background-size: cover;
                -o-background-size: cover;                
                background-size: cover;    //规定背景图片的尺寸
	}
</style>

</head>
<body class="body">
		<!--准备一个包裹器-->
        <div id="wrap">
	        <!--将立方体包裹在其中-->
	        <!-- 顺序：前，左，右，后，上，下 -->
	        <span id="in-front"><img src="images/x1.jpg"></span>
	        <span id="in-left"><img src="images/x6.jpg"></span>
	        <span id="in-right"><img src="images/x7.jpg"></span>
	        <span id="in-back"><img src="images/x9.jpg"></span>
	        <span id="in-top"><img src="images/x10.jpg"></span>
	        <span id="in-bottom"><img src="images/x11.jpg"></span>
	        <!--第三步组装外部的立方体-->
	        <div id="out-front"><img src="images/x3.jpg"></div>
	        <div id="out-left"><img src="images/x4.jpg"></div>
	        <div id="out-right"><img src="images/x5.jpg"></div>
	        <div id="out-back"><img src="images/x13.jpg"></div>
	        <div id="out-top"><img src="images/x14.jpg"></div>
	        <div id="out-bottom"><img src="images/x12.jpg"></div>
        </div>
</body>
</html>