当前位置： 移动技术网 > IT编程>开发语言>JavaScript > CSS实现3d旋转相册（疑难解答）

CSS实现3d旋转相册（疑难解答）

2020年07月22日  | 移动技术网IT编程  | 我要评论

3d旋转相册

一、代码实现

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的值的算
法进行计算得到图片重叠的时候的颜色信息了

本文地址：https://blog.csdn.net/xun__xing/article/details/107484348

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网