源代码如下:
<!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>