利用css3制作一个3D电子旋转相册

最新推荐文章于 2023-11-09 11:16:08 发布

不咸带点甜

最新推荐文章于 2023-11-09 11:16:08 发布

阅读量811

点赞数 2

分类专栏： css 文章标签： css css3 html 定位

本文链接：https://blog.csdn.net/CallMeBY/article/details/107284541

版权

本文介绍如何利用CSS3实现一个3D旋转的电子相册，通过设置角度旋转、3D立体和动画效果，展示12或10张照片。步骤包括设置背景、定义ul和li样式以及制作旋转动画。代码详细，适合动手实践。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

介绍

知识一种利用css3就能达到的3D旋转图片展示，先找出自己的或朋友的12张或者10张照片，利用角度旋转和3D立体配合动画效果就能实现3D旋转，话不多接下来给出过程步骤，一起来制作吧。

步骤

首先建立一个图片文件夹，在里面存放一张背景图，和12张旋转图片，图片大小可以自定。
然后第一步设置背景

<style>
body,html{
            height: 100%;
            background: url(images/bg2.jpg) repeat;//使照片平铺在页面
        }
</style>

2.接下来在里面给出一个ul标签，在给每个li里面设置样式，使ul固定定位在页面，在设置每个li对y轴的旋转角度，以及对z轴的移动距离。
3.最后制作一个动画，引入就可以拉。

详细代码

<style>
	body,html{
   
			height: 100%;
            background: url(images/bg2.jpg) repeat;//使照片平铺在页面
        }
    ul,ol{
   
    	list-style:none;//清楚ul和li的样式
    }
	//给ul设置样式，使其固定在页面
	.warp{
   
			width: 280px;
            height: 400px;
            position: fixed;//固定定位，并使其居中
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            
            transform-style: preserve-3d;//3D效果
            transform: rotateX(15deg) rotateY(0deg);//使其略微X轴旋转角度，美观
            animation: gogo 30s linear infinite ;//引入动画，时间，匀速，永久
		}
	//给图片设置大小
	.warp li img{
   
            width: 280px;
            height: 400px;
        }
 	//使里面的li定位在ul里面。
	.warp li{<