- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- div{
- width: 200px;
- height: 200px;
- margin: 0 auto;
- /*修改基本样式*/
- }
- .div1{
- margin-top: 100px;
- transform: perspective(400px) rotatex(0deg) rotatey(0deg);
- /*拥有近大远小透视效果*/
- transform-style: preserve-3d;
- /*设置为3d空间*/
- position: relative;
- border:1px solid #000000;
- animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
- /*旋转动画*/
- }
- .div1 div{
- position: absolute;
- font-size: 80px;
- line-height: 200px;
- text-align: center;
- top: 0;
- left: 0;
- /*内部样式*/
- }
- .div1_1{
- transform: translatez(100px);
- background-color: red;
- /*向前移动100像素,作为最前面的面*/
- }
- .div1_2{
- transform: rotatex(90deg) translatez(100px);
- background-color:green;
- /*绕x轴旋转90度,在z轴正方向移动100像素,作为上面的面*/
- /*注:旋转时坐标系会跟着一起旋转,z轴原来是垂直屏幕向外的,绕x轴旋转90度以后就是在屏幕上向上的方向*/
- }
- .div1_3{
- transform: rotatex(180deg) translatez(100px);
- background-color: blue;
- /*绕x轴旋转180度,这时z轴垂直屏幕向内,在z轴正方向移动100像素,作为后面的面*/
- }
- .div1_4{
- transform: rotatex(270deg) translatez(100px);
- background-color: purple;
- /*绕x轴旋转270度,这时z轴向下,在z轴正方向移动100像素,作为下面的面*/
- }
- .div1_5{
- transform: rotatey(90deg) translatez(100px);
- background-color: pink;
- /*绕y轴旋转90度,这时z轴向右,在z轴正方向移动100像素,作为右面的面*/
- }
- .div1_6{
- transform: rotatey(270deg) translatez(100px);
- background-color: yellow;
- /*绕y轴旋转90度,这时z轴向左,在z轴正方向移动100像素,作为左面的面*/
- }
- @-webkit-keyframes xuanzhuan{
- from{
- transform:perspective(400px) rotatex(0deg);
- }
- to{
- transform:perspective(400px) rotatex(360deg);
- }
- }
- .div1:hover{
- transform: perspective(400px) scale(1.5);
- animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
- /*有hover事件是动画暂停*/
- }
- </style>
- </head>
- <body>
- <div class="div1">
- <div class="div1_1">1</div>
- <div class="div1_2">2</div>
- <div class="div1_3">3</div>
- <div class="div1_4">4</div>
- <div class="div1_5">5</div>
- <div class="div1_6">6</div>
- </div>
- <!--html标签布局-->
- </body>
- </html>
来源: http://www.cnblogs.com/zheshiyigemanong/p/6793634.html