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

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

效果图

在这里插入图片描述

介绍

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

步骤

  1. 首先建立一个图片文件夹,在里面存放一张背景图,和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{<
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值