<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 独立的DIV元素旋转</title>
<style>
body {
-webkit-font-smoothing: antialiased;
background: #f1f4fd;
}
.square {
position: relative;
width: 90vmin;
height: 90vmin;
margin: 5vmin auto;
overflow: hidden;
text-align: center;
line-height: 90vmin;
font-family: Helvetica Neue, Helvetica, Sans-Serif;
font-size: 5vh;
-webkit-transform: translate3D(0, 0, 0);
-ms-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
.tile {
display: block;
background: royalblue;
background: -webkit-linear-gradient(#4169e1, #99afef);
background: linear-gradient(#4169e1, #99afef);
border-radius: 2px;
box-shadow: 0 0 2px -1px #4169e1;
width: 1%;
height: 10%;
overflow: hidden;
position: absolute;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-transition: -webkit-transform 2s ease;
transition: transform 2s ease;
text-indent: -100px;
}
.tile:nth-child(1) {
left: 51.88372%;
top: 79.9408%;
-webkit-transform: rotate(3.6deg);
-ms-transform: rotate(3.6deg);
transform: rotate(3.6deg);
}
.square:hover .tile:nth-child(1) {
-webkit-transform: rotate(-42.3deg);
-ms-transform: rotate(-42.3deg);
transform: rotate(-42.3deg);
}
body:hover .tile:nth-child(1) {
-webkit-transform: rotate(-3.6deg);
-ms-transform: rotate(-3.6deg);
transform: rotate(-3.6deg);
}
.tile:nth-child(2) {
left: 53.76%;
top: 79.76344%;
-webkit-transform: rotate(7.2deg);
-ms-transform: rotate(7.2deg);
transform: rotate(7.2deg);
}
.square:hover .tile:nth-child(2) {
-webkit-transform: rotate(-84.6deg);
-ms-transform: rotate(-84.6deg);
transform: rotate(-84.6deg);
}
body:hover .tile:nth-child(2) {
-webkit-transform: rotate(-7.2deg);
-ms-transform: rotate(-7.2deg);
transform: rotate(-7.2deg);
}
.tile:nth-child(3) {
left: 55.62144%;
top: 79.46862%;
-webkit-transform: rotate(10.8deg);
-ms-transform: rotate(10.8deg);
transform: rotate(10.8deg);
}
.square:hover .tile:nth-child(3) {
-webkit-transform: rotate(-126.9deg);
-ms-transform: rotate(-126.9deg);
transform: rotate(-126.9deg);
}
body:hover .tile:nth-child(3) {
-webkit-transform: rotate(-10.8deg);
-ms-transform: rotate(-10.8deg);
transform: rotate(-10.8deg);
}
.tile:nth-child(4) {
left: 57.4607%;
top: 79.05749%;
-webkit-transform: rotate(14.4deg);
-ms-transform: rotate(14.4deg);
transform: rotate(14.4deg);
}
.square:hover .tile:nth-child(4) {
-webkit-transform: rotate(-169.2deg);
-ms-transform: rotate(-169.2deg);
transform: rotate(-169.2deg);
}
body:hover .tile:nth-child(4) {
-webkit-transform: rotate(-14.4deg);
-ms-transform: rotate(-14.4deg);
transform: rotate(-14.4deg);
}
.tile:nth-child(5) {
left: 59.27051%;
top: 78.5317%;
-webkit-transform: rotate(18deg);
-ms-transform: rotate(18deg);
transform: rotate(18deg);
}
.square:hover .tile:nth-child(5) {
-webkit-transform: rotate(-211.5deg);
-ms-transform: rotate(-211.5deg);
transform: rotate(-211.5deg);
}
body:hover .tile:nth-child(5) {
-webkit-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
transform: rotate(-18deg);
}
.tile:nth-child(6) {
left: 61.04374%;
top: 77.89329%;
-webkit-transform: rotate(21.6deg);
-ms-transform: rotate(21.6deg);
transform: rotate(21.6deg);
}
.square:hover .tile:nth-child(6) {
-webkit-transform: rotate(-253.8deg);
-ms-transform: rotate(-253.8deg);
transform: rotate(-253.8deg);
}
body:hover .tile:nth-child(6) {
-webkit-transform: rotate(-21.6deg);
-ms-transform: rotate(-21.6deg);
transform: rotate(-21.6deg);
}
.tile:nth-child(7) {
left: 62.77338%;
top: 77.14481%;
-webkit-transform: rotate(25.2deg);
-ms-transform: rotate(25.2deg);
transform: rotate(25.2deg);
}
.square:hover .tile:nth-child(7) {
-webkit-transform: rotate(-296.1deg);
-ms-transform: rotate(-296.1deg);
transform: rotate(-296.1deg);
}
body:hover .tile:nth-child(7) {
-webkit-transform: rotate(-25.2deg);
-ms-transform: rotate(-25.2deg);
transform: rotate(-25.2deg);
}
.tile:nth-child(8) {
left: 64.45261%;
top: 76.2892%;
-webkit-transform: rotate(28.8deg);
-ms-transform: rotate(28.8deg);
transform: rotate(28.8deg);
}
.square:hover .tile:nth-child(8) {
-webkit-transform: rotate(-338.4deg);
-ms-transform: rotate(-338.4deg);
transform: rotate(-338.4deg);
}
body:hover .tile:nth-child(8) {
-webkit-transform: rotate(-28.8deg);
-ms-transform: rotate(-28.8deg);
transform: rotate(-28.8deg);
}
.tile:nth-child(9) {
left: 66.0748%;
top: 75.32984%;
-webkit-transform: rotate(32.4deg);
-ms-transform: rotate(32.4deg);
transform: rotate(32.4deg);
}
.square:hover .tile:nth-child(9) {
-webkit-transform: rotate(-380.7deg);
-ms-transform: rotate(-380.7deg);
transform: rotate(-380.7deg);
}
body:hover .tile:nth-child(9) {
-webkit-transform: rotate(-32.4deg);
-ms-transform: rotate(-32.4deg);
transform: rotate(-32.4deg);
}
.tile:nth-child(10) {
left: 67.63356%;
top: 74.27051%;
-webkit-transform: rotate(36deg);
-ms-transform: rotate(36deg);
transform: rotate(36deg);
}
.square:hover .tile:nth-child(10) {
-webkit-transform: rotate(-423deg);
-ms-transform: rotate(-423deg);
transform: rotate(-423deg);
}
body:hover .tile:nth-child(10) {
-webkit-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
transform: rotate(-36deg);
}
.tile:nth-child(11) {
left: 69.12272%;
top: 73.1154%;
-webkit-transform: rotate(39.6deg);
-ms-transform: rotate(39.6deg);
transform: rotate(39.6deg);
}
.square:hover .tile:nth-child(11) {
-webkit-transform: rotate(-465.3deg);
-ms-transform: rotate(-465.3deg);
transform: rotate(-465.3deg);
}
body:hover .tile:nth-child(11) {
-webkit-transform: rotate(-39.6deg);
-ms-transform: rotate(-39.6deg);
transform: rotate(-39.6deg);
}
.tile:nth-child(12) {
left: 70.53641%;
top: 71.86906%;
-webkit-transform: rotate(43.2deg);
-ms-transform: rotate(43.2deg);
transform: rotate(43.2deg);
}
.square:hover .tile:nth-child(12) {
-webkit-transform: rotate(-507.6deg);
-ms-transform: rotate(-507.6deg);
transform: rotate(-507.6deg);
}
body:hover .tile:nth-child(12) {
-webkit-transform: rotate(-43.2deg);
-ms-transform: rotate(-43.2deg);
transform: rotate(-43.2deg);
}
.tile:nth-child(13) {
left: 71.86906%;
top: 70.53641%;
-webkit-transform: rotate(46.8deg);
-ms-transform: rotate(46.8deg);
transform: rotate(46.8deg);
}
.square:hover .tile:nth-child(13) {
-webkit-transform: rotate(-549.9deg);
-ms-transform: rotate(-549.9deg);
transform: rotate(-549.9deg);
}
body:hover .tile:nth-child(13) {
-webkit-transform: rotate(-46.8deg);
-ms-transform: rotate(-46.8deg);
transform: rotate(-46.8deg);
}
.tile:nth-child(14) {
left: 73.1154%;
top: 69.12272%;
-webkit-transform: rotate(50.4deg);
-ms-transform: rotate(50.4deg);
transform: rotate(50.4deg);
}
.square:hover .tile:nth-child(14) {
-webkit-transform: rotate(-592.2deg);
-ms-transform: rotate(-592.2deg);
transform: rotate(-592.2deg);
}
body:hover .tile:nth-child(14) {
-webkit-transform: rotate(-50.4deg);
-ms-transfo
