实现Div的3D图片的360度旋转-岳瑞涛

来源：互联网发布：人工智能对社会编辑：程序博客网时间：2024/06/02 07:29
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>实现Div的3D图片的360度旋转-岳瑞涛</title>    <style>        *{            font-size: 30px;color: #00DD00; padding:0; margin:0;        }        #yrt {            position: relative;            height: 300px;            width: 300px;            -webkit-perspective: 500;            margin-top: 200px;            margin-right: auto;            margin-left: auto;        }        .yueruitao {            margin: 10px;            width: 280px;            height: 280px;            background-color: #8C0000;            opacity: 0.3;            -webkit-transform-style: preserve-3d;            -webkit-animation: spin 15s infinite linear;        }        .yueruitao > div {            position: absolute;            top: 40px;            left: 40px;            width: 280px;            height: 200px;            padding: 10px;            -webkit-box-sizing: border-box;        }        .yueruitao > :first-child {            background-color: #ffff00;            -webkit-transform: translateZ(-100px) rotateY(45deg);        }        .yueruitao > :last-child {            background-color: #333;            -webkit-transform: translateZ(50px) rotateX(20deg);            -webkit-transform-origin: 50% top;        }        /*执行Y轴旋转360度动画*/        @-webkit-keyframes spin {            from {-webkit-transform: rotateY(0);}            to {-webkit-transform: rotateY(360deg);}        }    </style></head><body><div id="yrt"><div><a href="http://blog.csdn.net/yueruitao">岳瑞涛</a></div>    <div class="yueruitao">        <div><a href="/">http://blog.csdn.net/yueruitao</a></div>    </div></div></body></html>
0 0