效果图
介绍
知识一种利用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{<