css3 实现正方体3D旋转

来源：互联网发布：如何改变网络的拥堵编辑：程序博客网时间：2024/06/05 06:20
源代码如下：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .all{            margin-left: 200px;            width: 300px;            height: 300px;            perspective: 500px;            border: 1px solid green;            transform: rotate(30deg);            transform-style: preserve-3d;            transition: 6s;        }        .t1{            width: 0px;            height: 0px;            margin-left: 100px;            border: 50px solid red;            transform: rotateX(90deg);            transform-origin: bottom;        }        .t2{            width: 0px;            height: 0px;            float: left;            border:50px solid  aquamarine;            transform: rotateY(-90deg);            transform-origin: right;        }        .t3{            width: 0px;            height: 0px;            float: left;            margin-left: 100px;            border:50px solid blue ;            transform: rotateY(90deg);            transform-origin:left;        }        .t4{            width: 0px;            height: 0px;            margin-left: 100px;            margin-top: 100px;            border: 50px solid orange;            transform: rotateX(-90deg);            transform-origin: top;        }        .t5{            width: 0px;            height: 0px;            margin-left: 100px;            margin-top: -200px;            border: 50px solid pink;            transform: rotateX(0deg);            transform-origin: bottom;        }        .all:hover{            transform: rotateX(360deg)rotateY(540deg)rotateZ(290deg)scale(1.2);        }    </style></head><body><div class="all">    <div class="t1"></div>    <div class="t2"></div>    <div class="t3"></div>    <div class="t4"></div>    <div class="t5"></div></div></body></html>
阅读全文
0 0