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

需要注意的点:

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="data:images/1.jpg"><img src="data:images/2.jpg"><img src="data:images/3.jpg"><img src="data:images/4.jpg"><img src="data:images/5.jpg"><img src="data:images/6.jpg"><img src="data:images/7.jpg"><img src="data:images/8.jpg"><img src="data:images/9.jpg"><img src="data:images/10.jpg"></div></body>
</html>

注:图是让我进行马赛克后的图片,主要目的是方便大家看见图片的轮廓

基于CSS的3D旋转画册的制作相关推荐

CSS3 简单3D旋转画册
CSS3 简单3D旋转画册上次我们简单介绍了c3的一些基础知识,我们今天来做一个小练习: 这个简单的案例是3D的一个旋转画册,那么上面是我们的一个效果图,因为不能够传视屏所以就暂时只能够截图来看一下 ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
【css实现3D旋转卡片】
提示:话不多说直接上代码前言实现效果如下一.html代码 <!DOCTYPE html> <html><head><meta http-equiv=&q ...
html中3d哪个方向是x轴,详解用CSS绘制3D旋转立方体
CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例.从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的.具有艺术感染力的视觉效果的编程语言.动画效果的生 ...
【Html+CSS】3D旋转相册
3D旋转木马相册 & 3D盒子相册因为代码大部分相同,就放一起了注释一下就是另一个相册 <!DOCTYPE html> <html lang="en" ...
css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...
纯CSS实现3D旋转相册特效
csdn下载地址 : https://download.csdn.net/download/began_in_the_heart/11643624 纯粹无聊分享,代码来源于网络,仅供学习交流..... ...
如何用css实现一个3D旋转照片墙
一.前言学习前端是件很有趣的事,今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦,希望感兴趣的小伙伴会喜欢! 正文: 今天,我们要做一个3D旋转相册,首先让我们了 ...
沿着x轴旋转的html例子,CSS3旋转实例学习（附3D旋转实例）
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用,transform主要包括以下几种:旋 ...

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

基于CSS的3D旋转画册的制作相关推荐

最新文章

热门文章