<html> <head> <meta charset="utf-8"> <title>展示元素移动的原理</title> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <style> body {background:#222} .perspective {perspective:800px;} .perspective .wrap { width: 800px; height: 300px; margin: 100px auto; transform-style: preserve-3d; /*为了让div有3D效果*/ } .perspective .wrap .plat { width: 1200px; height: 1200px; border-radius: 50%; transform: rotateX(80deg); position: absolute; top: 134%; left: 50%; margin-left: -600px; margin-top: -600px; background: -webkit-radial-gradient(center center,500px 500px,rgb(44, 255, 148),rgb(251, 240, 111),rgb(228, 158, 142),rgb(232, 151, 211),rgb(161, 236, 163),rgba(63,139,175,0)); } </style> <script type="text/javascript"> </script> </head> <body> <div class='perspective'> <div class='wrap'> <div class='plat'></div> </div> </div> </body> </html>
