实现立体状物体的旋转展示

最新推荐文章于 2022-12-23 21:08:33 发布

m0_37694604

最新推荐文章于 2022-12-23 21:08:33 发布

阅读量1k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/m0_37694604/article/details/71189847

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先给展示一下效果啊，就是造这么一个立体状，然后鼠标点击之后再移动就可以实现360度无死角旋转了。

此篇用到css比较多，所以先和大家推荐一个写css好用的编辑器，webstorm。用它写css时候可以省很多力气。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        body{
            background: rgba(0,0,0,0.5);
        }
        .father{
            width:200px;
            height:200px;
            margin:200px auto;
            position: relative;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            /*perspective景深  transform;2D到3D的转换  preserve-3d创建3D环境*/
            -webkit-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -moz-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -ms-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -o-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
        }
        /* >子代选择器*/
        .father >div{
            height:100%;
            width:100%;
            position: absolute;
            -webkit-box-shadow: 0 0 50px skyblue;
            -moz-box-shadow:  0 0 50px skyblue;
            box-shadow:  0 0 50px skyblue;
            /* x轴  y轴 阴影面积 阴影颜色*/
        }
        .bottom{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateX(90deg) translateZ(-100px) ;
            -moz-transform: rotateX(90deg) translateZ(-100px);
            -ms-transform: rotateX(90deg) translateZ(-100px);
            -o-transform: rotateX(90deg) translateZ(-100px);
            transform: rotateX(90deg) translateZ(-100px);
        }
        .top{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateX(90deg) translateZ(100px) ;
            -moz-transform: rotateX(90deg) translateZ(100px);
            -ms-transform: rotateX(90deg) translateZ(100px);
            -o-transform: rotateX(90deg) translateZ(100px);
            transform: rotateX(90deg) translateZ(100px);
        }
        .left{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateY(90deg) translateZ(100px) ;
            -moz-transform: rotateY(90deg) translateZ(100px);
            -ms-transform: rotateY(90deg) translateZ(100px);
            -o-transform: rotateY(90deg) translateZ(100px);
            transform: rotateY(90deg) translateZ(100px);
        }
        .right{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateY(90deg) translateZ(-100px) ;
            -moz-transform: rotateY(90deg) translateZ(-100px);
            -ms-transform: rotateY(90deg) translateZ(-100px);
            -o-transform: rotateY(90deg) translateZ(-100px);
            transform: rotateY(90deg) translateZ(-100px);
            /* transform执行顺序：从左到右  rotateY是旋转  translateZ是平移*/
        }
        .front{
            background-image: url("image/1.jpg");
            -webkit-transform:translateZ(100px) ;
            -moz-transform: translateZ(100px);
            -ms-transform: translateZ(100px);
            -o-transform:translateZ(100px);
            transform:translateZ(100px)
        }
        .back{
            background-image: url("image/1.jpg");
            -webkit-transform:translateZ(-100px) ;
            -moz-transform: translateZ(-100px);
            -ms-transform: translateZ(-100px);
            -o-transform:translateZ(-100px);
            transform:translateZ(-100px)
        }
    </style>
    <script src="js/jquery/dist/jquery.min.js"> </script>
    <script>
        $(function(){
            //登DOM完成后再执行js代码
            //jQuery语法  $()或者jQuery()
            $('.father').mousedown(function(ev){
                  //  console.log(ev.pageX);
                    var x=ev.clientX;//获取鼠标按下后的水平坐标
                    var y=ev.clientY;
                  //  console.log(x);
                    $(document).bind('mousemove',function(ev){

                        var x_=ev.clientX;
                        var y_=ev.clientY;

                        $('.father').css({
                            'transform':'perspective(800px)  rotateX('+y_+'deg) rotateY('+x_+'deg)'
                        })
                    }).mouseup(function (){
                            $(document).unbind('mousemove');
                            $(document).mousedown=null;
                        })
            })
           return false;
        })
    </script>
</head>
<body>
    <div class="father">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="front"></div>
        <div class="back"></div>
    </div>
</body>
</html>

下面分开来介绍：

<body>
    <div class="father">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="front"></div>
        <div class="back"></div>
    </div>
</body>

body中定义了父类和子类div，看名字也大概可以看出来，父类div是用来盛放子类的容器，而子类div则是用来表示一个立方体的六个面。

        *{
            margin: 0;
            padding:0;
        }
        body{
            background: rgba(0,0,0,0.5);
        }

这些style的定义无关紧要，可根据个人喜好随意修改。

  .father{
            width:200px;
            height:200px;
            margin:200px auto;
            position: relative;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            /*perspective景深  transform;2D到3D的转换  preserve-3d创建3D环境*/
            -webkit-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -moz-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -ms-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            -o-transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
            transform: perspective(800px) rotateX(-10deg) rotateY(60deg);
        }

立体图形就要涉及到三维了，这里给予介绍二维到三维的转换。

 /* >子代选择器*/
        .father >div{
            height:100%;
            width:100%;
            position: absolute;
            -webkit-box-shadow: 0 0 50px skyblue;
            -moz-box-shadow:  0 0 50px skyblue;
            box-shadow:  0 0 50px skyblue;
            /* x轴  y轴 阴影面积 阴影颜色*/
        }

这是实现立方体的棱阴影效果的css，上述shadow的四个参数的含义也在注释中给出来了。

 .bottom{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateX(90deg) translateZ(-100px) ;
            -moz-transform: rotateX(90deg) translateZ(-100px);
            -ms-transform: rotateX(90deg) translateZ(-100px);
            -o-transform: rotateX(90deg) translateZ(-100px);
            transform: rotateX(90deg) translateZ(-100px);
        }
        .top{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateX(90deg) translateZ(100px) ;
            -moz-transform: rotateX(90deg) translateZ(100px);
            -ms-transform: rotateX(90deg) translateZ(100px);
            -o-transform: rotateX(90deg) translateZ(100px);
            transform: rotateX(90deg) translateZ(100px);
        }
        .left{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateY(90deg) translateZ(100px) ;
            -moz-transform: rotateY(90deg) translateZ(100px);
            -ms-transform: rotateY(90deg) translateZ(100px);
            -o-transform: rotateY(90deg) translateZ(100px);
            transform: rotateY(90deg) translateZ(100px);
        }
        .right{
            background-image: url("image/1.jpg");
            -webkit-transform:rotateY(90deg) translateZ(-100px) ;
            -moz-transform: rotateY(90deg) translateZ(-100px);
            -ms-transform: rotateY(90deg) translateZ(-100px);
            -o-transform: rotateY(90deg) translateZ(-100px);
            transform: rotateY(90deg) translateZ(-100px);
            /* transform执行顺序：从左到右  rotateY是旋转  translateZ是平移*/
        }
        .front{
            background-image: url("image/1.jpg");
            -webkit-transform:translateZ(100px) ;
            -moz-transform: translateZ(100px);
            -ms-transform: translateZ(100px);
            -o-transform:translateZ(100px);
            transform:translateZ(100px)
        }
        .back{
            background-image: url("image/1.jpg");
            -webkit-transform:translateZ(-100px) ;
            -moz-transform: translateZ(-100px);
            -ms-transform: translateZ(-100px);
            -o-transform:translateZ(-100px);
            transform:translateZ(-100px)
        }

这几个样式设置就是将二维的DIV旋转平移而组成立方体的过程了。因为父类大小是200px，下面子类平移的距离都是100px，相反方向各平移100px，这关系就对应了。

 <script src="js/jquery/dist/jquery.min.js"> </script>
    <script>
        $(function(){
            //登DOM完成后再执行js代码
            //jQuery语法  $()或者jQuery()
            $('.father').mousedown(function(ev){
                  //  console.log(ev.pageX);
                    var x=ev.clientX;//获取鼠标按下后的水平坐标
                    var y=ev.clientY;
                  //  console.log(x);
                    $(document).bind('mousemove',function(ev){

                        var x_=ev.clientX;
                        var y_=ev.clientY;

                        $('.father').css({
                            'transform':'perspective(800px)  rotateX('+y_+'deg) rotateY('+x_+'deg)'
                        })
                    }).mouseup(function (){
                            $(document).unbind('mousemove');
                            $(document).mousedown=null;
                        })
            })
           return false;
        })
    </script>

为实现旋转效果，js必不可少，引用了jQuery，至于JS的含义，想必看完就能明白了。

m0_37694604

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现立体状物体的旋转展示

先给展示一下效果啊，就是造这么一个立体状，然后鼠标点击之后再移动就可以实现360度无死角旋转了。此篇用到css比较多，所以先和大家推荐一个写css好用的编辑器，webstorm。用它写css时候可以省很多力气。直接上代码：html>lang="en"> charset="UTF-8"> Title *{ ma
复制链接

扫一扫