charset="UTF-8"> Title *{ ma_立方体的旋转展示">
devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-02-15 20:35:09

赞

踩

立方体的旋转展示

先给展示一下效果啊，就是造这么一个立体状，然后鼠标点击之后再移动就可以实现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的含义，想必看完就能明白了。


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/86755
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号