纯CSS3 实现 3D旋转相册
程序员文章站
2022-03-23 11:10:12
纯CSS3 实现 3D旋转相册思路：首先要有一个可以转动的父级元素要有若干个子元素通过父级元素给子元素开启三维立体空间将子元素围父元素摆放：三维空间y轴排列，就是钢管舞运动，y轴旋转的度数=360 / 图片的个数-1，然后累加为了使元素具有立体感，所有z轴都往前移动使用过渡创建动画阶段0%-100%肯定是没问题的，但是中间的阶段为：每次旋转90°，360/90=4次，100/4=25，也就是说每次是25%，到100%一共4次+0%=5次让大盒子旋转其他子盒子面就会跟着旋转，因为是左右旋转...
纯CSS3 实现 3D旋转相册
思路：
- 首先要有一个可以转动的父级元素
- 要有若干个子元素
- 通过父级元素给子元素开启三维立体空间
- 将子元素围父元素摆放：三维空间y轴排列，就是钢管舞运动，y轴旋转的度数=360 / 图片的个数-1，然后累加
- 为了使元素具有立体感，所有z轴都往前移动
- 使用过渡
- 创建动画阶段0%-100%肯定是没问题的，但是中间的阶段为：每次旋转90°，360/90=4次，100/4=25，也就是说每次是25%，到100%一共4次+0%=5次
- 让大盒子旋转其他子盒子面就会跟着旋转，因为是左右旋转的所有是按照y轴旋转，也就是钢管舞运动
- 为了让旋转更加富有效果，我们可以小幅度旋转x轴达到以上一下的效果
- 父盒子调用动画，父盒子转动子盒子就转动了
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D相册</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #000000;
}
.photo {
width: 280px;
height: 400px;
/* 绝对定位 */
position: fixed;
/* 占满整个body */
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url(./images/12.jpg) no-repeat;
background-size: 100%;
/* 居中 */
margin: 150px auto;
/* 子元素开启三维立体空间 */
transform-style: preserve-3d;
/* 开启动画，动画匀速，5s完成一次，不断执行 */
animation: animation 5s linear infinite;
}
img {
width: 250px;
height: 350px;
/* 边框 */
border: 5px solid #cccccc;
/* 圆角边框 */
border-radius: 5px;
/* 绝对定位 */
position: absolute;
/* 定位到父盒子的左上端 */
left: 0;
top: 0;
background-color: blue;
}
/*
设置每个图片元素的位置
1、设置每个img元素旋转后的位置：Y轴：360/(11-1) = 36
2、注意：11张图片，i = 0; 36 * i
3、为了让每个图形向外扩散适当的距离，所以Z轴设置500px
*/
.photo img:nth-child(1) {
transform: rotateY(0deg) translateZ(500px);
}
.photo img:nth-child(2) {
transform: rotateY(36deg) translateZ(500px);
}
.photo img:nth-child(3) {
transform: rotateY(72deg) translateZ(500px);
}
.photo img:nth-child(4) {
transform: rotateY(108deg) translateZ(500px);
}
.photo img:nth-child(5) {
transform: rotateY(144deg) translateZ(500px);
}
.photo img:nth-child(6) {
transform: rotateY(180deg) translateZ(500px);
}
.photo img:nth-child(7) {
transform: rotateY(216deg) translateZ(500px);
}
.photo img:nth-child(8) {
transform: rotateY(252deg) translateZ(500px);
}
.photo img:nth-child(9) {
transform: rotateY(288deg) translateZ(500px);
}
.photo img:nth-child(10) {
transform: rotateY(324deg) translateZ(500px);
}
.photo img:nth-child(11) {
transform: rotateY(360deg) translateZ(500px);
}
/* 创建动画
1、Y轴每次旋转90deg，最大到360
2、为了达到一上一下的效果，让X轴旋转10deg
*/
@keyframes animation {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
25% {
transform: rotateX(10deg) rotateY(90deg);
}
50% {
transform: rotateX(0deg) rotateY(180deg);
}
75% {
transform: rotateX(-10deg) rotateY(270deg);
}
100% {
transform: rotateX(0deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="photo">
<img src="./images/01.jpg" alt="">
<img src="./images/02.jpg" alt="">
<img src="./images/03.jpg" alt="">
<img src="./images/04.jpg" alt="">
<img src="./images/05.jpg" alt="">
<img src="./images/06.jpg" alt="">
<img src="./images/07.jpg" alt="">
<img src="./images/08.jpg" alt="">
<img src="./images/09.jpg" alt="">
<img src="./images/10.jpg" alt="">
<img src="./images/11.jpg" alt="">
</div>
<audio autoplay="autoplay" loop="loop" controls>
<source src="./audio/弹钢琴的楠楠 - 【钢琴】windy hill（翻自 羽肿）.mp3" type="audio/mp3">
<source src="./audio/弹钢琴的楠楠 - 【钢琴】windy hill（翻自 羽肿）.ogg" type="audio/ogg">
</audio>
</body>
</html>
本文地址：https://blog.csdn.net/abraham_ly/article/details/111143937