css3 3D物体旋转

时间 2019-11-08

标签 css3 css 3d 物体旋转栏目 CSS 繁體版

原文原文链接

最近一直在研究一些前端相关的3D技术，想要写一个能够自动旋转的东西，想了好多方法，可能由于半路子出家，基础并非很好，因此弄的很辛苦，如今和你们分享一下研究过程当中坎坷。css

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

可是这些并不够知足个人要求，由于想要作自动旋转整个3D舞台，因此最早想到是用时间计时器setInerval来计时，每一个间隔用jquery中css函数来改变rotate中的值，贴个代码前端

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

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

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

接下来尝试第二种方法，这个帖子和这个帖子好像都分析的颇有道理呀，感受看到了但愿的曙光，好的尝试一下。立刻codingcss3

$(".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');

愿望老是美好的，事实老是残酷的，这样的做用并非很大，又没有卵用，为何会这样子呢，按道理来讲是能够的啊，哪位大哥知道的请分析下，先谢谢了。已经接近崩溃边缘，思路彻底没有问题啊，难道是我人品问题，最后在度娘一下吧，娘比哥有时候更有用，是吧。web

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

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

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

哭晕在厕所。。。。。。。。。。。动画

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

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

给个效果图

<!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的样式呢，再去研究会。

1. CSS3 3D旋转立方体
2. css3 3d旋转-正方体
3. css3炫酷立方体3D旋转
4. css3 立方体3d旋转效果
5. css3-实现3D立方体旋转
6. css3 3d旋转动画
7. css3 3D旋转特效
8. CSS3动画-3D旋转
9. css3 3D旋转效果
10. unity 物体旋转
更多相关文章...
• Rust 结构体 - RUST 教程
• DTD - 实体 - DTD 教程
• 互联网组织的未来：剖析GitHub员工的任性之源
• Java Agent入门实战（一）-Instrumentation介绍与使用