html5 与 css3 简单结合的3D动态照片布局

18648165727

发布于 2019.01.30 16:47 阅读 2576 评论 0

简单html5 与 css3 配合js代码的3D照片效果

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D 相册</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="stage">
    <img src="img/1.jpeg" alt="">
    <img src="img/2.jpeg" alt="">
    <img src="img/3.jpg" alt="">
    <img src="img/4.jpeg" alt="">
    <img src="img/5.jpg" alt="">
    <img src="img/6.jpg" alt="">
    <img src="img/7.jpg" alt="">
    <img src="img/8.jpg" alt="">
</div>
</body>
<script src = "js/script.js"></script>
</html>

style.css
@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #000000;
    overflow: hidden;
}
.stage{
    width: 133px;
    height: 200px;
    margin: 278px auto;
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;/*使被转换的子元素保留其 3D 转换：*/
    -webkit-transform: perspective(800px) rotateX(-30deg);
    -moz-transform: perspective(800px) rotateX(-30deg);
    -ms-transform: perspective(800px) rotateX(-30deg);
    -o-transform: perspective(800px) rotateX(-30deg);
    transform: perspective(800px) rotateX(-30deg);/*逆时针旋转30度,透视800px*/
}
.stage img{
    width: 133px;
    height: 200px;
    position: absolute;
    -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,0.7)100%);/*倒影效果*/
    /*渐变*/
}

script.js
window.onload = function(){
    var stage = document.querySelector(".stage");
    var images = document.querySelectorAll("img");
    var imgLen = images.length;
    var degree = 360/imgLen;
    var stepX = null;
    var stepY = null;
    var degX = null;
    var degY = null;
    //照片的布局
    for(var i=0;i<imgLen;i++){
        var str = "rotateY("+degree*i+"deg) translateZ(300px)";//每个照片的间隔
        css3Transform(images[i],str);
    }
    //取消默认拖拽
    document.ondragstart = function(){
        return false;
    };
    //鼠标移动
    document.onmousedown = function(e){
        //兼容性问题
        var eve = e||event;
        var mouX = eve.clientX;//clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
        var mouY = eve.clientY;//clientY 返回的是竖直坐标
        document.onmousemove = function(e){
            var evel = e||event;
            var mouseX = evel.clientX;
            var mouseY = evel.clientY;
            stepX = mouseX - mouX;
            stepY = mouseY - mouY;
            degX -= stepY*0.2;
            degY += stepX*0.1;
            var str = "perspective(800px) rotateX(-30deg) rotateX("+degX+"deg) rotateY("+degY+"deg)";
            css3Transform(stage,str);
            mouX = mouseX;
            mouY = mouseY;
        }
    };
        document.onmouseup = function(){
            document.onmousemove = function(){
                return false;
            }
        };
    //兼容函数
    function css3Transform(element,value){
        var arr = ["o","ms","Moz","webkit",""];
        var length = arr.length;
        for(var i=0;i<length;i++){
            element.style[arr[i] + "Transform"] = value;
        }
    }
};

说明:

1.此代码最最核心的我认为是css3部分与js部分。

2.其中最核心的地方在于js部分的兼容函数，这也是我第一次见到，其余的部分就是css与js的结合。

3.关于鼠标拖拽的问题:一开始我还以为特别的高大尚，后来懂了以后才知道，异常的简单，其实就是先计算鼠标点击时候的坐标，然后在计算鼠标移动的坐标，最后舞台的移动实际上就是鼠标移动的坐标减去鼠标点击的坐标。

然后就是旋转的角度问题了，这也是最重要的一个难点

就是舞台水平旋转其实是鼠标上下移动所导致的

舞台竖直旋转其实就是鼠标左右移动所导致的

其次就是注意取值的顺时针逆时针问题了

发表评论