• [CSS3] 3D桃心


    <!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>
  • 相关阅读:
    一个老码农对职场的思考
    PHP算法 (冒泡 选择排序 折半查找 顺序查找 斐波那契数列 素数 )
    php 图像的基本操作
    php 随机字符串 验证码
    php中 var_dump 和 echo 和 print_r() 和 print
    正则表达式的整理
    php上传文件原理
    git 几个简单命令
    git 几个简单命令
    会话技术Cookie
  • 原文地址:https://www.cnblogs.com/frost-yen/p/6909973.html
Copyright © 2020-2023  润新知