CSS3 简单3D旋转画册
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
文章就到这里，如有错误疑问请指出，将及时修改。