基于CSS的3D旋转画册的制作

原创于 2022-07-09 17:45:11 发布

· 422 阅读

0 ·

版权

文章标签：

#css #3d #css3

css 同时被 2 个专栏收录

20 篇文章

订阅专栏

html

20 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建一个具有3D旋转效果的相册，通过调整图片尺寸、内外边距和使用关键帧动画，实现方正照片的逐张旋转展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要注意的点:

1.首先是image的整理,以个人实际开发经验来看,方方正正的照片做出来的效果比较好
2.其次是在html中的盒子的大小和尺寸的构建,以实际情况看自己需要放几张照片来调整盒子的大小(一个大的盒子里放几个小的盒子)
3.将每个盒子的内外边距调整合适


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>相信光的奥特王小懒的3D旋转相册</title>
    <style type="text/css">
        *{padding: 0;
        margin: 0;}
        body,html{height:100%;}
        body{background-image: url("images/beijing.jpg");background-size: 100% 100%;}
        #box{width: 200px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: go 45s linear infinite;
           }
        #box img{width: 250px;
                 height: 250px;
                 position: absolute;
                 left: 0;
                 top: 0;
        }
        #box img:nth-child(1){
            transform: rotateY(0deg) translateZ(500px);}
        #box img:nth-child(2){
            transform: rotateY(36deg) translateZ(500px);}
        #box img:nth-child(3){
            transform: rotateY(72deg) translateZ(500px);}
        #box img:nth-child(4){
            transform: rotateY(108deg) translateZ(500px);}
        #box img:nth-child(5){
            transform: rotateY(144deg) translateZ(500px);}
        #box img:nth-child(6){
            transform: rotateY(180deg) translateZ(500px);}
        #box img:nth-child(7){
            transform: rotateY(216deg) translateZ(500px);}
        #box img:nth-child(8){
            transform: rotateY(252deg) translateZ(500px);}
        #box img:nth-child(9){
            transform: rotateY(288deg) translateZ(500px);}
        #box img:nth-child(10){
            transform: rotateY(324deg) translateZ(500px);}
		@keyframes go {
		    0%{transform: rotateX(0deg) rotateY(0deg);}
		    25%{transform: rotateX(20deg) rotateY(180deg);}
		    50%{transform: rotateX(0deg) rotateY(360deg);}
		    75%{transform: rotateX(-20deg) rotateY(540deg);}
		    100%{transform: rotateX(0deg) rotateY(720deg);}
		
		}
    </style>
</head>
	<body>
		<div id="box">
		    <img src="images/1.jpg">
		    <img src="images/2.jpg">
		    <img src="images/3.jpg">
		    <img src="images/4.jpg">
		    <img src="images/5.jpg">
		    <img src="images/6.jpg">
		    <img src="images/7.jpg">
		    <img src="images/8.jpg">
		    <img src="images/9.jpg">
		    <img src="images/10.jpg">
		</div>
	</body>
</html>

注:图是让我进行马赛克后的图片,主要目的是方便大家看见图片的轮廓
在这里插入图片描述