- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="google" value="notranslate">
- <title>CSS 3D 悬停效果 </title>
- <style>
- body {
- background: #2E426C;
- overflow: hidden;
- }
- p {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 2em;
- position: absolute;
- top: 1em;
- left: 1em;
- margin: 0;
- color: #75A2A2;
- }
- #Container {
- -webkit-perspective: 500px;
- perspective: 1000px;
- }
- #Tiles {
- width: 630px;
- height: 630px;
- position: absolute;
- left: 50%;
- top: -100px;
- margin-left: -315px;
- -webkit-transform: rotateZ(0deg);
- transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- }
- .title {
- width: 200px;
- height: 200px;
- float: left;
- margin: 0 10px 10px 0;
- cursor: pointer;
- }
- .title:before {
- position: absolute;
- content: '';
- width: 200px;
- height: 200px;
- background: #75A2A2;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
- pointer-events: none;
- }
- .title:hover:before {
- background: #FFC600;
- -webkit-transform: translate3d(0, 0, 20px);
- transform: translate3d(0, 0, 20px);
- box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);
- }
- </style>
- </head>
- <body>
- <p>Hover over</p>
- <div id="Container">
- <div id="Tiles">
- <div class="title"></div>
- <div class="title"></div>
- <div class="title"></div>
- <div class="title"></div>
- <div class="title"></div>
- <div class="title"></div>
- <div class="title"></div>
- <div class="title"></div>
- <div class="title"></div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40816/bfd8cfa7dcb70662f710fd9759866f51.html