首页 > 代码库 > [CSS3] 3D桃心

[CSS3] 3D桃心

2024-09-26 03:32:39   216人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background:#000;
            }
            #heart{
                width: 160px;
                height: 160px;
                margin: 200px auto;
                transform-style: preserve-3d;/*设置3d环境*/
                animation: rota 15s linear infinite;/*css3自定义动画 ：名称 时间 匀速 无限*/
                -webkit-animation: rota 15s linear infinite;
            }
            @-webkit-keyframes rota{
                to{
                    transform: rotateX(360deg) rotateY(360deg);
                    -webkit-transform: rotateX(360deg) rotateY(360deg);
                }
            }
            #heart div.rot{
                position: absolute;
                left: 0;
                top: 0;
                width: 100px;
                height: 160px;
                border: 1px solid red;
                border-radius: 50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 后面是竖直方向*/
                border-width: 1px 1px 0 0;
                
            }
            .cube{
                position: relative;
                width: 52px;
                height: 52px;
                
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                -webkit-transform: translateX(25px) translateY(56px) translateZ(30px);
            }
            .cube:hover{
                transform: rotateY(360deg);
                -webkit-transform: rotateY(360deg);
            }
            .cube div
            {
                position: absolute;
                width: 52px;
                height: 52px;
                
            }
            .cube div:nth-child(1){/*结构伪类选择器*/
                left: 0;
                top: -52px;
                /*transform-origin: 50% 50% 0;*/
                transform-origin:bottom;
                -webkit-transform-origin: bottom;
                transform: rotateX(90deg);
                -webkit-transform: rotateX(90deg);
            }
            .cube div:nth-child(2){/*结构伪类选择器*/
                left: 0;
                top: 52px;
                transform-origin:top;
                -webkit-transform-origin: top;
                transform: rotateX(-90deg);
                -webkit-transform: rotateX(-90deg);
            }
            .cube div:nth-child(3){/*结构伪类选择器*/
                left: -52px;
                top: 0;
                transform-origin:right;
                -webkit-transform-origin: right;
                transform: rotateY(-90deg);
                -webkit-transform: rotateY(-90deg);
            }
            .cube div:nth-child(4){/*结构伪类选择器*/
                left: 52px;
                top: 0;
                transform-origin:left;
                -webkit-transform-origin: left;
                transform: rotateY(90deg);
                -webkit-transform: rotateY(90deg);
            }
            .cube div:nth-child(5){/*结构伪类选择器*/
                left: 0;
                top: 0;
            }
            .cube div:nth-child(6){/*结构伪类选择器*/
                left: 0;
                top: 0;
                transform: translateZ(-52px);
                -webkit-transform: translateZ(-52px);
            }
        </style>
    </head>
    <body>
        <div id="heart">
            <div class="cube">
                <div>
                    <img src="img/pic1.jpg" width="52" height="52" />
                </div>
                <div>
                    <img src="img/pic2.jpg" width="52" height="52" />
                </div>
                <div>
                    <img src="img/pic3.jpg" width="52" height="52" />
                </div>
                <div>
                    <img src="img/pic4.jpg" width="52" height="52" />
                </div>
                <div>
                    <img src="img/pic5.jpg" width="52" height="52" />
                </div>
                <div>
                    <img src="img/pic6.jpg" width="52" height="52" />
                </div>
            </div>
        </div>
        <div class="cube"></div>
    </body>
</html>
<script>
    var heart = document.getElementById(‘heart‘);
    for (var i=0;i<36;i++) {
        var oDiv = document.createElement(‘div‘);
        oDiv.className = ‘rot‘;
        oDiv.style.transform = ‘rotateY(‘+10*i+‘deg) rotateZ(45deg)‘;
        oDiv.style.webkitTransform = ‘rotateY(‘+10*i+‘deg) rotateZ(45deg) translateX(30PX)‘;
        heart.appendChild(oDiv);
    }
</script>

 

[CSS3] 3D桃心


联系
我们