最新消息:文章中包含代码时,请遵守代码高亮规范!

css3实现的3D旋转爱心相册【原创】

HTML+CSS Jonny 59浏览 0评论

这是前一段时间学习css3,在网上看一个老师的公开课上讲的一个小案例,觉得挺有趣的,而且也能帮助熟悉css3的一些代码,所以第二天自己就尝试着写一个出来。由于对css3的代码不熟悉,花了小半天时间,最后还是败在IE的兼容上面。今天发出来是给大家提供一个写css3代码的思路,了解css3一部分代码的用途。先贴张效果图:

下面是全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate</title>
    <style type="text/css">
        body {
            background-color: #000;
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            -ms-perspective: 1000;
            perspective: 1000;
        }
        
        #rotate{
           position: relative;
           width: 200px;
           height: 320px;
           margin: auto;
           margin-top: 13%;
           -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
           transform-style: preserve-3d;
           animation:myrotate linear 15s infinite;
           -webkit-transform-origin: 50% 50% 0;
           -moz-transform-origin: 50% 50% 0;
           -ms-transform-origin: 50% 50% 0;
           -o-transform-origin: 50% 50% 0;
           transform-origin: 50% 50% 0;
        }
        @keyframes myrotate{
            from{
                -webkit-transform: rotateY(0deg)rotateX(0deg);
                -ms-transform: rotateY(0deg)rotateX(0deg);
                -o-transform: rotateY(0deg)rotateX(0deg);
                transform: rotateY(0deg)rotateX(0deg);
            }
            to{
                -webkit-transform: rotateY(720deg)rotateX(360deg);
                -ms-transform: rotateY(720deg)rotateX(360deg);
                -o-transform: rotateY(720deg)rotateX(360deg);
                transform: rotateY(720deg)rotateX(360deg);
            }
        }

        @-webkit-keyframes myrotate{
            from{
                -webkit-transform: rotateY(0deg)rotateX(0deg);
                -ms-transform: rotateY(0deg)rotateX(0deg);
                -o-transform: rotateY(0deg)rotateX(0deg);
                transform: rotateY(0deg)rotateX(0deg);
            }
            to{
                -webkit-transform: rotateY(720deg)rotateX(360deg);
                -ms-transform: rotateY(720deg)rotateX(360deg);
                -o-transform: rotateY(720deg)rotateX(360deg);
                transform: rotateY(720deg)rotateX(360deg);
            }
        }

        @-moz-keyframes myrotate{
            from{
                -webkit-transform: rotateY(0deg)rotateX(0deg);
                -ms-transform: rotateY(0deg)rotateX(0deg);
                -o-transform: rotateY(0deg)rotateX(0deg);
                transform: rotateY(0deg)rotateX(0deg);
            }
            to{
                -webkit-transform: rotateY(720deg)rotateX(360deg);
                -ms-transform: rotateY(720deg)rotateX(360deg);
                -o-transform: rotateY(720deg)rotateX(360deg);
                transform: rotateY(720deg)rotateX(360deg);
            }
        }
        #rotate .heart {
           position: absolute;
           top: 0;
           left: 0;
           width: 200px;
           height: 320px;
           border:2px solid red;
           border-left: 0;
           border-bottom: 0;
           border-radius: 50% 50% 0/50% 50% 0;
           -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
           transform-style: preserve-3d;
           -webkit-transform: rotateZ(45deg)translateX(60px);
           -ms-transform: rotateZ(45deg)translateX(60px);
           -o-transform: rotateZ(45deg)translateX(60px);
           transform: rotateZ(45deg)translateX(60px);
        }
        #cube {
            position: relative;
            width: 100px;
            height: 100px;
           -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
           transform-style: preserve-3d;
            transform: rotateZ(-45deg)translate3d(-80px,66px,50px);
            -webkit-transform-origin: 50% 50% -50px;
            -moz-transform-origin: 50% 50% -50px;
            -ms-transform-origin: 50% 50% -50px;
            -o-transform-origin: 50% 50% -50px;
            transform-origin: 50% 50% -50px;
        }
        
        #cube .cube {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }
        #cube .cube:nth-child(1) {
            top:-100px;
            -webkit-transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
            -o-transform: rotateX(90deg);
            transform: rotateX(90deg);
            -webkit-transform-origin: 50% bottom 0;
            -moz-transform-origin: 50% bottom 0;
            -ms-transform-origin: 50% bottom 0;
            -o-transform-origin: 50% bottom 0;
            transform-origin: 50% bottom 0;
        }
        #cube .cube:nth-child(2) {
            top:100px;
            -webkit-transform: rotateX(-90deg);
            -ms-transform: rotateX(-90deg);
            -o-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
            -webkit-transform-origin: 50% top 0;
            -moz-transform-origin: 50% top 0;
            -ms-transform-origin: 50% top 0;
            -o-transform-origin: 50% top 0;
            transform-origin: 50% top 0;
        }
        #cube .cube:nth-child(3) {
            left:-100px;
            -webkit-transform: rotateY(-90deg);
            -ms-transform: rotateY(-90deg);
            -o-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
            -webkit-transform-origin: right 50% 0;
            -moz-transform-origin: right 50% 0;
            -ms-transform-origin: right 50% 0;
            -o-transform-origin: right 50% 0;
            transform-origin: right 50% 0;
        }
        #cube .cube:nth-child(4) {
            left:100px;
            -webkit-transform: rotateY(90deg);
            -ms-transform: rotateY(90deg);
            -o-transform: rotateY(90deg);
            transform: rotateY(90deg);
            -webkit-transform-origin: left 50% 0;
            -moz-transform-origin: left 50% 0;
            -ms-transform-origin: left 50% 0;
            -o-transform-origin: left 50% 0;
            transform-origin: left 50% 0;
        }
        #cube .cube:nth-child(5) {
            /*top:-50px;*/
        }
        #cube .cube:nth-child(6) {
            /*top:-50px;*/
            -webkit-transform: translateZ(-100px);
            -ms-transform: translateZ(-100px);
            -o-transform: translateZ(-100px);
            transform: translateZ(-100px);
        }

    </style>
</head>
<body>
    <div id="rotate">
        <div class="heart">
            <div id="cube">
              <!-- 图片可以替换成自己想要显示的 -->
                <div class="cube"><img src="images/images.jpg" width="100%" height="100%"></div>
                <div class="cube"><img src="images/images.jpg" width="100%" height="100%"></div>
                <div class="cube"><img src="images/images.jpg" width="100%" height="100%"></div>
                <div class="cube"><img src="images/images.jpg" width="100%" height="100%"></div>
                <div class="cube"><img src="images/images.jpg" width="100%" height="100%"></div>
                <div class="cube"><img src="images/images.jpg" width="100%" height="100%"></div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
        var rotate = document.getElementById('rotate');
        var html = '';
        for(var i = 1; i<36; i++){
            html +='<div class="heart" style="-webkit-transform: rotateY('+i*10+'deg)rotateZ(45deg)translateX(60px);-ms-transform: rotateY('+i*10+'deg)rotateZ(45deg)translateX(60px);-o-transform: rotateY('+i*10+'deg)rotateZ(45deg)translateX(60px);transform: rotateY('+i*10+'deg)rotateZ(45deg)translateX(60px);"></div>'
        }
        rotate.innerHTML += html;
        
    </script>
</body>
</html>

因为css3的兼容不太好,所以css代码基本都是兼容写法。
可以把代码复制下来,去看看效果,也可以看看我的代码,因为公开课老师的也只是给了一些思路,说用了哪些css动画,并没有看到源码,自己摸索着写的,所以有些代码写的不太规范,可能有些写的都不对,但是效果出来了,凑合着看看,哪些不对的给个评论,一起交流。
ie不支持transform-style: preserve-3d;所以最好用谷歌浏览器打开。

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22746.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Jonny的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!