CSS3 简单3D旋转画册

上次我们简单介绍了c3的一些基础知识，我们今天来做一个小练习；

这个简单的案例是3D的一个旋转画册，那么上面是我们的一个效果图，因为不能够传视屏所以就暂时只能够截图来看一下具体结构。
正如大家所看见的，该相册由两个正方体组成，由大的正方体包裹着小的正方体，实现方式其实是用了margin或者使用定位position来实现。

其实这个画册的做法很简单，这边就不一步一步的解释了，下面我将代码粘贴出来，大家自行测试。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>3D旋转画册</title><link rel="stylesheet" type="text/css" href="css/reset.css" /></head><style>#album-inner{height: 100px;width: 100px;position: absolute;top: 45%;left: 45%;transform-style: preserve-3d;/* transform: rotateX(-30deg) rotateY(-45deg); *//* perspective: 800px; */animation: move 16s linear infinite;}//选择器创建move运动规则@keyframes move{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(-360deg) rotateY(-360deg);}}ul li{height: 100%;width: 100%;position: absolute;}ul li img{height: 100%;width: 100%;}/* 六张图片分别设置位置 */#album-inner li:nth-of-type(1){transform: translateZ(50px);}#album-inner li:nth-of-type(2){transform: translateX(50px) rotateY(90deg);}#album-inner li:nth-of-type(3){transform: translateZ(-50px);}#album-inner li:nth-of-type(4){transform: translateX(-50px) rotateY(90deg);}#album-inner li:nth-of-type(5){transform: translateY(-50px) rotateX(90deg);}#album-inner li:nth-of-type(6){transform: translateY(50px) rotateX(90deg);}/* 外面的旋转 */#album-outer{/* transition: transfrom 3s linear !important; */height: 160px;width: 160px;position: absolute;top: 41%;left: 42.5%;transform-style: preserve-3d;/* transform: rotateX(-30deg) rotateY(-45deg); *//* perspective: 800px; */animation: move 16s linear infinite;/* opacity: 0.5; */}#album-outer li{opacity: 0.3;transition:all 3s linear;}#album-outer li:nth-of-type(1){transform: translateZ(80px);}#album-outer li:nth-of-type(2){transform: translateX(80px) rotateY(90deg);}#album-outer li:nth-of-type(3){transform: translateZ(-80px);}#album-outer li:nth-of-type(4){transform: translateX(-80px) rotateY(90deg);}#album-outer li:nth-of-type(5){transform: translateY(-80px) rotateX(90deg);}#album-outer li:nth-of-type(6){transform: translateY(80px) rotateX(90deg);}</style><body><ul id="album-inner"><li><img src="./img/1.jpg" alt=""></li><li><img src="./img/2.jpg" alt=""></li><li><img src="./img/3.jpg" alt=""></li><li><img src="./img/4.jpg" alt=""></li><li><img src="./img/5.jpg" alt=""></li><li><img src="./img/6.jpg" alt=""></li></ul><ul id="album-outer"><li><img src="./img/1.jpg" alt=""></li><li><img src="./img/2.jpg" alt=""></li><li><img src="./img/3.jpg" alt=""></li><li><img src="./img/4.jpg" alt=""></li><li><img src="./img/5.jpg" alt=""></li><li><img src="./img/6.jpg" alt=""></li></ul></body><script type="text/javascript" src="js/jquery3.4.1.js"></script><script type="text/javascript">// 设置一个点击事件点击平移外部距离$(function(){// 设置一个开关，判断外部闭合还是打开var switchMove = false;var outerLi = $('#album-outer').children();// 书写滚动函数function move(){if(switchMove){$('#album-outer').css({transition:'all 3s linear',height:'160px',width:'160px',top:'41%',left: '42.5%'});// 内部透明$('#album-inner li').css('opacity',1);// 外部透明// outerLi.css('opacity',0.8);outerLi.eq(0).css({transform: 'translateZ(80px)'})outerLi.eq(1).css({transform: 'translateX(80px) rotateY(90deg)'})outerLi.eq(2).css({transform: 'translateZ(-80px)'})outerLi.eq(3).css({transform: 'translateX(-80px) rotateY(90deg)'})outerLi.eq(4).css({transform: 'translateY(-80px) rotateX(90deg)'})outerLi.eq(5).css({transform: 'translateY(80px) rotateX(90deg)'})switchMove = !switchMove;}else{// 内部透明// $('#album-inner li').css('opacity',0.5);// 外部透明outerLi.css('opacity',0.6);$('#album-outer').css({transition:'all 3s linear',height:'300px',width:'300px',left:'37.5%',top:'35.5%'});outerLi.eq(0).css({transform: 'translateZ(200px)'})outerLi.eq(1).css({transform: 'translateX(200px) rotateY(90deg)'})outerLi.eq(2).css({transform: 'translateZ(-200px)'})outerLi.eq(3).css({transform: 'translateX(-200px) rotateY(90deg)'})outerLi.eq(4).css({transform: 'translateY(-200px) rotateX(90deg)'})outerLi.eq(5).css({transform: 'translateY(200px) rotateX(90deg)'})switchMove = !switchMove;}}// 添加事件监听$(document).on('click',move)})</script>
</html>

这边我就只简单解释一下思路，制作3D模型最主要的是要有一个3D的思维，我这边制作3D的方式主要是将所有的面集中在一个点上（使用position），然后想象着将每个面发射出去，例如今天的案例是一个正方形，那么我们将六个面按照不同的方向发射出去相同的距离（使用translate平移），平移出去之后我们要将每个面旋转到各自相应的位置上就可以了（rotate旋转），具体操作什么模型还需要自己进行一个计算。当然最重要的要记得给父级元素添加transfrom-style，让子元素在3D空间显示。
具体让模型旋转起来，是使用@keyframes选择器定义样式，然后使用animation让他动起来，这个使用方法和jquery当中的animate很相似，作用方式和使用方式都差不多，但是使用css3会有更高的效率。

在套用我的代码时候记得自行添加图片，自行引入jquery
文章就到这里，如有错误疑问请指出，将及时修改。

CSS3 简单3D旋转画册相关推荐

3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
基于CSS的3D旋转画册的制作
需要注意的点: 1.首先是image的整理,以个人实际开发经验来看,方方正正的照片做出来的效果比较好 2.其次是在html中的盒子的大小和尺寸的构建,以实际情况看自己需要放几张照片来调整盒子的大小(一 ...
CSS3：3D旋转rotate3d及3D呈现transform-style
3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或自定义轴进行旋转. 语法格式: transform:rotateX(45deg);沿着x轴正方向旋转45度: transform:rotateY( ...
css3 3d旋转兼容模式下,前端CSS3： 3D旋转的问题（请水神和毒舌放过）
[HTML] 纯文本查看复制代码 Document body { perspective: 500px; } .box { position: relative; width: 300px; hei ...
利用css3的3d旋转透视加动画做的一个骰子动态效果
实现效果代码 <div class="father"><div class="son son1">1</div><d ...
沿着x轴旋转的html例子,CSS3旋转实例学习（附3D旋转实例）
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用,transform主要包括以下几种:旋 ...
css3 3D旋转特效
最近自己的网站正在制作,由于是个人网站,所以我傲娇的抛弃了IE,痛快的用起了css3和html5的诸多特效,然而问题亦随之而来.这篇文章的主要讲解在使用css3的3D旋转的时候遇到的文章,错误之处,还 ...
HTML5+CSS3小实例：3D旋转卡片
HTML5+CSS3实现3D旋转卡片,开发工具:VS Code. 先看效果: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82YkNLBC-1653803901135 ...
【CSS】记踩坑-图片3D旋转设置景深perspective
在练习CSS3图片3D旋转的时候,为了使图片更有旋转的立体效果,设置了景深,但发现图片的旋转角度发生了偏移. 设置景深之前: CSS <style>div{margin-top: 200p ...

CSS3 简单3D旋转画册

CSS3 简单3D旋转画册

CSS3 简单3D旋转画册相关推荐

最新文章

热门文章