css3 3D物体旋转

最新推荐文章于 2023-05-22 19:49:17 发布

weixin_34240657

最新推荐文章于 2023-05-22 19:49:17 发布

阅读量134

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：https://my.oschina.net/u/1046919/blog/742037

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近一直在研究一些前端相关的3D技术，想要写一个可以自动旋转的东西，想了好多方法，可能因为半路子出家，基础并不是很好，所以弄的很辛苦，现在和大家分享一下研究过程中坎坷。

css3中的3D变换，最先从这里入门：好吧，CSS3 3D transform变换，不过如此！，这个作者很对本人的胃口，写的很详尽，也简单易懂，更是诙谐幽默，很值得推荐。

但是这些并不够满足我的要求，因为想要做自动旋转整个3D舞台，所以最先想到是用时间计时器setInerval来计时，每个间隔用jquery中css函数来改变rotate中的值，贴个代码

$('.box').css('-webkit-transform',"rotateY(" + angle + "px)");

就像上面这个代码，angle随着时间变化，但是发现这个并不会旋转，没有卵用，好吧，只能放弃了，作为一个小白，我觉得逻辑上是很有道理的，但是无奈，没办法。时隔几天后发现这种方法还是能用的，语句是这样的

$('.box').css({'-webkit-transform':'rotateY(' + angle + 'px)'});

接下来尝试第二种方法，这个帖子和这个帖子好像都分析的很有道理呀，感觉看到了希望的曙光，好的尝试一下。马上coding

$(".box").animate({
                        '-webkit-transform': 'rotateY(' + angle + 'deg)',
                        '-moz-transform': 'rotateY(' + angle + 'deg)',
                        '-ms-transform': 'rotateY(' + angle + 'deg)',
                        '-o-transform': 'rotateY(' + angle + 'deg)',
                        'transform': 'rotateY(' + angle + 'deg)',
                        'zoom': 1
                        }, 100);
//或者是这样

$(".box").animate({ whyNotToUseANonExistingProperty: 100 },{
                            step:function(now,fx) {
                                $('.box').css('-webkit-transform',"rotateY(" + angle + "px)");             
                            },
                            duration:'slow'
                        },'linear');

愿望总是美好的，事实总是残酷的，这样的作用并不是很大，又没有卵用，为什么会这样子呢，按道理来说是可以的啊，哪位大哥知道的请分析下，先谢谢了。已经接近崩溃边缘，思路完全没有问题啊，难道是我人品问题，最后在度娘一下吧，娘比哥有时候更有用，是吧。

百度搜索，“css3 自动旋转”，嗯，等等，好像看到了什么不一样的blog，点这里，好像是一篇基础知识，不过里面还有例子，点我看例子，死马当活马医，看看吧。

恩，有点不对劲，他的物体在自动转，什么，没有用到js，是我眼瞎还是css3太强大？？

纠缠我这么久的问题两行解决了。

哭晕在厕所。。。。。。。。。。。

好吧，附上我写的一个小效果。自动旋转的立方体，额好吧，不算是立方体，将就吧。

动态图不会制作，原谅我，复制去流浪器看吧。

给个效果图

输入图片说明

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>「CSS3 」动画详解</title>
    <style>
        .canvas{
            width: 400px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid #000;
          
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            -o-perspective: 1000px;
            perspective: 1000px;
            -webkit-perspective-origin: 0 0;
            -moz-perspective-origin: 0 0;
            -ms-perspective-origin: 0 0;
            -o-perspective-origin: 0 0;
            perspective-origin: 0 0;
           
        }
        .box{
            width: 150px;
            height: 150px;
            position: relative;
            top: 50%;
            margin-top: -75px;
            margin-right: auto;
            margin-left: auto;
            border: 1px solid #000;

            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;

            -webkit-animation:scroll 10s linear 0s infinite;

        }

        @-webkit-keyframes scroll {

            0% {
                -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);

            }

          /*   50% {
                -webkit-transform:rotateY(360deg) rotateX(0deg) ;
            } */

            100% {
                -webkit-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }

        }


        .box > *{
            width: 150px;
            height: 150px;
            margin: 0 auto;
            text-align: center;
            line-height: 150px;
            font-size: 80px;
            position: absolute;
            opacity: 0.5;
            border: 1px solid red;
        }
        .box .front{
            -webkit-transform: translateZ(100px) rotateX(0deg);
            -moz-transform: translateZ(100px) rotateX(0deg);
            -ms-transform: translateZ(100px) rotateX(0deg);
            -o-transform: translateZ(100px) rotateX(0deg);
            transform: translateZ(100px) rotateX(0deg);
            background: red;
        }
        .box .back{
            -webkit-transform: translateZ(-100px) rotateX(0deg);
            -moz-transform: translateZ(-100px) rotateX(0deg);
            -ms-transform: translateZ(-100px) rotateX(0deg);
            -o-transform: translateZ(-100px) rotateX(0deg);
            transform: translateZ(-100px) rotateX(0deg);
            background: red;
        }
        .box .top{
            -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);
            background: green;
        }
        .box .bottom{
            -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);
            background: green;
        }
        .box .left{
            -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);
            background: blue;
        }.box .right{
            -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);
            background: blue;
        }
    </style>
</head>
<body>

<div class="canvas">
    <div class="box">
        <div class="front">Fr</div>
        <div class="back">Ba</div>
        <div class="left">Le</div>
        <div class="right">Ri</div>
        <div class="top">To</div>
        <div class="bottom">Bo</div>
        
    </div>

</div>
</body>
</html>

还是要继续唠叨一句，在js中到底要怎么才能动态改变这些3D的样式呢，再去研究会。

转载于:https://my.oschina.net/u/1046919/blog/742037