3d旋转相册
- 一、代码实现
- 1.css样式
- 2.html+js代码
- 二、疑难解答
- 1.发现问题
- 2.解决问题
- 1.设置背景颜色
- 2.设置透明度
- 3.利用div.style(background-image)添加背景图片
一、代码实现
1.css样式
<style>
*{
margin: 0;
padding: 0;
}
:root{
height: 100%;
}
body{
height: 100%;
perspective: 2000px;
transform-style: preserve-3d;
}
div.photo{
width: 250px;
height: 250px;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%,-50%);
transform-style: preserve-3d;
animation: run 10s linear infinite;
}
@keyframes run{
0%{
transform: translate(-50%,-50%) rotateY(0deg);
}
100%{
transform: translate(-50%,-50%) rotateY(360deg);
}
}
img{
width: 250px;
position: absolute;
opacity: 0.99;/*????????????????????*/
backface-visibility: visible;
/* 默认值为visible,即能看见3d画面的背面,hidden看不见 */
}
img:nth-of-type(1){
transform: rotateY(45deg) translatez(450px);
}
img:nth-of-type(2){
transform: rotateY(90deg) translatez(450px);
}
img:nth-of-type(3){
transform: rotateY(135deg) translatez(450px);
}
img:nth-of-type(4){
transform: rotateY(180deg) translatez(450px);
}
img:nth-of-type(5){
transform: rotateY(225deg) translatez(450px);
}
img:nth-of-type(6){
transform: rotateY(270deg) translatez(450px);
}
img:nth-of-type(7){
transform: rotateY(315deg) translatez(450px);
}
img:nth-of-type(8){
transform: rotateY(360deg) translatez(450px);
}
</style>
2.html+js代码
<div class="photo">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
<img src="6.jpg" alt="">
<img src="7.jpg" alt="">
<img src="8.jpg" alt="">
</div>
<script>
document.body.onmousemove = function(e){
this.style.perspectiveOrigin = ""+e.pageX+"px "+e.pageY+"px";
}//鼠标当前点为视角所在方位
</script>
二、疑难解答
1.发现问题
不难发现,前面的css样式里img的opacity不明所以,在这里进行解答!
这里我们对opacity进行注释后发现,3d旋转时右边的部分在z轴靠后的图片反而遮盖住了在z轴靠前的图片,而左边确没有影响。(为了方便解析,这里对图片的顺序进行标注)
首先我们看div中img插入图片的顺序:
1-8,顺序沿着红色箭头的方向旋转。
按照正常的文档流来说,img设置了absolute,没有指定z-index。都用默认的z-index, 不过html标签在 下边的自然盖住上边的。(元素的层叠水平-致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。)
所以我们的愿望是右边序号小的图片在序号大的图片“前面”。
但是因为序号小的img标签在序号大的img标签的后面上面, z-index天生低人一等。于是被后面压制了。
至于左边部分没有出现错乱,是1-3的图片旋转顺序、空间层级顺序和htmI中文档流的上下顺序是一致的。 所以后边的遮盖前边的,一点毛病没有。
那么怎么解决该问题呢?
2.解决问题
1.设置背景颜色
2.设置透明度
3.利用div.style(background-image)添加背景图片
扩展知识:图片在页面渲染的时候会去提取图片的颜色信息(提取的颜色信息不含有
alpha通道的值),如果两张图片叠加显示,那么会出现颜色值选择的问题,在谷歌浏览器
更新之后,会去选择先提取到的颜色值,因此展示的效果再叠加的部分就是最先出现的图片。
针对这个问题提供的解决方案:为img标签添加背景颜色或者设置透明度
扩展知识:在渲染页面之前提取颜色的时候,浏览器获取到他的颜色,这个颜色中是含
有alpha通道的值,alpha通道的作用是用来记录选区的,对于最终渲染到页面上的颜色有
选择性的作用,因此有了这个通道的值,渲染的时候就可以按照正常的含有alpha的值的算
法进行计算得到图片重叠的时候的颜色信息了