css让div旋转,CSS3 独立的DIV元素旋转

CSS

语言:

CSSSCSS

确定

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-transform: rotate(-50.4deg);

transform: rotate(-50.4deg); }

.tile:nth-child(15) {

left: 74.27051%;

top: 67.63356%;

-webkit-transform: rotate(54deg);

-ms-transform: rotate(54deg);

transform: rotate(54deg); }

.square:hover .tile:nth-child(15) {

-webkit-transform: rotate(-634.5deg);

-ms-transform: rotate(-634.5deg);

transform: rotate(-634.5deg); }

body:hover .tile:nth-child(15) {

-webkit-transform: rotate(-54deg);

-ms-transform: rotate(-54deg);

transform: rotate(-54deg); }

.tile:nth-child(16) {

left: 75.32984%;

top: 66.0748%;

-webkit-transform: rotate(57.6deg);

-ms-transform: rotate(57.6deg);

transform: rotate(57.6deg); }

.square:hover .tile:nth-child(16) {

-webkit-transform: rotate(-676.8deg);

-ms-transform: rotate(-676.8deg);

transform: rotate(-676.8deg); }

body:hover .tile:nth-child(16) {

-webkit-transform: rotate(-57.6deg);

-ms-transform: rotate(-57.6deg);

transform: rotate(-57.6deg); }

.tile:nth-child(17) {

left: 76.2892%;

top: 64.45261%;

-webkit-transform: rotate(61.2deg);

-ms-transform: rotate(61.2deg);

transform: rotate(61.2deg); }

.square:hover .tile:nth-child(17) {

-webkit-transform: rotate(-719.1deg);

-ms-transform: rotate(-719.1deg);

transform: rotate(-719.1deg); }

body:hover .tile:nth-child(17) {

-webkit-transform: rotate(-61.2deg);

-ms-transform: rotate(-61.2deg);

transform: rotate(-61.2deg); }

.tile:nth-child(18) {

left: 77.14481%;

top: 62.77338%;

-webkit-transform: rotate(64.8deg);

-ms-transform: rotate(64.8deg);

transform: rotate(64.8deg); }

.square:hover .tile:nth-child(18) {

-webkit-transform: rotate(-761.4deg);

-ms-transform: rotate(-761.4deg);

transform: rotate(-761.4deg); }

body:hover .tile:nth-child(18) {

-webkit-transform: rotate(-64.8deg);

-ms-transform: rotate(-64.8deg);

transform: rotate(-64.8deg); }

.tile:nth-child(19) {

left: 77.89329%;

top: 61.04374%;

-webkit-transform: rotate(68.4deg);

-ms-transform: rotate(68.4deg);

transform: rotate(68.4deg); }

.square:hover .tile:nth-child(19) {

-webkit-transform: rotate(-803.7deg);

-ms-transform: rotate(-803.7deg);

transform: rotate(-803.7deg); }

body:hover .tile:nth-child(19) {

-webkit-transform: rotate(-68.4deg);

-ms-transform: rotate(-68.4deg);

transform: rotate(-68.4deg); }

.tile:nth-child(20) {

left: 78.5317%;

top: 59.27051%;

-webkit-transform: rotate(72deg);

-ms-transform: rotate(72deg);

transform: rotate(72deg); }

.square:hover .tile:nth-child(20) {

-webkit-transform: rotate(-846deg);

-ms-transform: rotate(-846deg);

transform: rotate(-846deg); }

body:hover .tile:nth-child(20) {

-webkit-transform: rotate(-72deg);

-ms-transform: rotate(-72deg);

transform: rotate(-72deg); }

.tile:nth-child(21) {

left: 79.05749%;

top: 57.4607%;

-webkit-transform: rotate(75.6deg);

-ms-transform: rotate(75.6deg);

transform: rotate(75.6deg); }

.square:hover .tile:nth-child(21) {

-webkit-transform: rotate(-888.3deg);

-ms-transform: rotate(-888.3deg);

transform: rotate(-888.3deg); }

body:hover .tile:nth-child(21) {

-webkit-transform: rotate(-75.6deg);

-ms-transform: rotate(-75.6deg);

transform: rotate(-75.6deg); }

.tile:nth-child(22) {

left: 79.46862%;

top: 55.62144%;

-webkit-transform: rotate(79.2deg);

-ms-transform: rotate(79.2deg);

transform: rotate(79.2deg); }

.square:hover .tile:nth-child(22) {

-webkit-transform: rotate(-930.6deg);

-ms-transform: rotate(-930.6deg);

transform: rotate(-930.6deg); }

body:hover .tile:nth-child(22) {

-webkit-transform: rotate(-79.2deg);

-ms-transform: rotate(-79.2deg);

transform: rotate(-79.2deg); }

.tile:nth-child(23) {

left: 79.76344%;

top: 53.76%;

-webkit-transform: rotate(82.8deg);

-ms-transform: rotate(82.8deg);

transform: rotate(82.8deg); }

.square:hover .tile:nth-child(23) {

-webkit-transform: rotate(-972.9deg);

-ms-transform: rotate(-972.9deg);

transform: rotate(-972.9deg); }

body:hover .tile:nth-child(23) {

-webkit-transform: rotate(-82.8deg);

-ms-transform: rotate(-82.8deg);

transform: rotate(-82.8deg); }

.tile:nth-child(24) {

left: 79.9408%;

top: 51.88372%;

-webkit-transform: rotate(86.4deg);

-ms-transform: rotate(86.4deg);

transform: rotate(86.4deg); }

.square:hover .tile:nth-child(24) {

-webkit-transform: rotate(-1015.2deg);

-ms-transform: rotate(-1015.2deg);

transform: rotate(-1015.2deg); }

body:hover .tile:nth-child(24) {

-webkit-transform: rotate(-86.4deg);

-ms-transform: rotate(-86.4deg);

transform: rotate(-86.4deg); }

.tile:nth-child(25) {

left: 80%;

top: 50%;

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg); }

.square:hover .tile:nth-child(25) {

-webkit-transform: rotate(-1057.5deg);

-ms-transform: rotate(-1057.5deg);

transform: rotate(-1057.5deg); }

body:hover .tile:nth-child(25) {

-webkit-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

transform: rotate(-90deg); }

.tile:nth-child(26) {

left: 79.9408%;

top: 48.11628%;

-webkit-transform: rotate(93.6deg);

-ms-transform: rotate(93.6deg);

transform: rotate(93.6deg); }

.square:hover .tile:nth-child(26) {

-webkit-transform: rotate(-1099.8deg);

-ms-transform: rotate(-1099.8deg);

transform: rotate(-1099.8deg); }

body:hover .tile:nth-child(26) {

-webkit-transform: rotate(-93.6deg);

-ms-transform: rotate(-93.6deg);

transform: rotate(-93.6deg); }

.tile:nth-child(27) {

left: 79.76344%;

top: 46.24%;

-webkit-transform: rotate(97.2deg);

-ms-transform: rotate(97.2deg);

transform: rotate(97.2deg); }

.square:hover .tile:nth-child(27) {

-webkit-transform: rotate(-1142.1deg);

-ms-transform: rotate(-1142.1deg);

transform: rotate(-1142.1deg); }

body:hover .tile:nth-child(27) {

-webkit-transform: rotate(-97.2deg);

-ms-transform: rotate(-97.2deg);

transform: rotate(-97.2deg); }

.tile:nth-child(28) {

left: 79.46862%;

top: 44.37856%;

-webkit-transform: rotate(100.8deg);

-ms-transform: rotate(100.8deg);

transform: rotate(100.8deg); }

.square:hover .tile:nth-child(28) {

-webkit-transform: rotate(-1184.4deg);

-ms-transform: rotate(-1184.4deg);

transform: rotate(-1184.4deg); }

body:hover .tile:nth-child(28) {

-webkit-transform: rotate(-100.8deg);

-ms-transform: rotate(-100.8deg);

transform: rotate(-100.8deg); }

.tile:nth-child(29) {

left: 79.05749%;

top: 42.5393%;

-webkit-transform: rotate(104.4deg);

-ms-transform: rotate(104.4deg);

transform: rotate(104.4deg); }

.square:hover .tile:nth-child(29) {

-webkit-transform: rotate(-1226.7deg);

-ms-transform: rotate(-1226.7deg);

transform: rotate(-1226.7deg); }

body:hover .tile:nth-child(29) {

-webkit-transform: rotate(-104.4deg);

-ms-transform: rotate(-104.4deg);

transform: rotate(-104.4deg); }

.tile:nth-child(30) {

left: 78.5317%;

top: 40.72949%;

-webkit-transform: rotate(108deg);

-ms-transform: rotate(108deg);

transform: rotate(108deg); }

.square:hover .tile:nth-child(30) {

-webkit-transform: rotate(-1269deg);

-ms-transform: rotate(-1269deg);

transform: rotate(-1269deg); }

body:hover .tile:nth-child(30) {

-webkit-transform: rotate(-108deg);

-ms-transform: rotate(-108deg);

transform: rotate(-108deg); }

.tile:nth-child(31) {

left: 77.89329%;

top: 38.95626%;

-webkit-transform: rotate(111.6deg);

-ms-transform: rotate(111.6deg);

transform: rotate(111.6deg); }

.square:hover .tile:nth-child(31) {

-webkit-transform: rotate(-1311.3deg);

-ms-transform: rotate(-1311.3deg);

transform: rotate(-1311.3deg); }

body:hover .tile:nth-child(31) {

-webkit-transform: rotate(-111.6deg);

-ms-transform: rotate(-111.6deg);

transform: rotate(-111.6deg); }

.tile:nth-child(32) {

left: 77.14481%;

top: 37.22662%;

-webkit-transform: rotate(115.2deg);

-ms-transform: rotate(115.2deg);

transform: rotate(115.2deg); }

.square:hover .tile:nth-child(32) {

-webkit-transform: rotate(-1353.6deg);

-ms-transform: rotate(-1353.6deg);

transform: rotate(-1353.6deg); }

body:hover .tile:nth-child(32) {

-webkit-transform: rotate(-115.2deg);

-ms-transform: rotate(-115.2deg);

transform: rotate(-115.2deg); }

.tile:nth-child(33) {

left: 76.2892%;

top: 35.54739%;

-webkit-transform: rotate(118.8deg);

-ms-transform: rotate(118.8deg);

transform: rotate(118.8deg); }

.square:hover .tile:nth-child(33) {

-webkit-transform: rotate(-1395.9deg);

-ms-transform: rotate(-1395.9deg);

transform: rotate(-1395.9deg); }

body:hover .tile:nth-child(33) {

-webkit-transform: rotate(-118.8deg);

-ms-transform: rotate(-118.8deg);

transform: rotate(-118.8deg); }

.tile:nth-child(34) {

left: 75.32984%;

top: 33.9252%;

-webkit-transform: rotate(122.4deg);

-ms-transform: rotate(122.4deg);

transform: rotate(122.4deg); }

.square:hover .tile:nth-child(34) {

-webkit-transform: rotate(-1438.2deg);

-ms-transform: rotate(-1438.2deg);

transform: rotate(-1438.2deg); }

body:hover .tile:nth-child(34) {

-webkit-transform: rotate(-122.4deg);

-ms-transform: rotate(-122.4deg);

transform: rotate(-122.4deg); }

.tile:nth-child(35) {

left: 74.27051%;

top: 32.36644%;

-webkit-transform: rotate(126deg);

-ms-transform: rotate(126deg);

transform: rotate(126deg); }

.square:hover .tile:nth-child(35) {

-webkit-transform: rotate(-1480.5deg);

-ms-transform: rotate(-1480.5deg);

transform: rotate(-1480.5deg); }

body:hover .tile:nth-child(35) {

-webkit-transform: rotate(-126deg);

-ms-transform: rotate(-126deg);

transform: rotate(-126deg); }

.tile:nth-child(36) {

left: 73.1154%;

top: 30.87728%;

-webkit-transform: rotate(129.6deg);

-ms-transform: rotate(129.6deg);

transform: rotate(129.6deg); }

.square:hover .tile:nth-child(36) {

-webkit-transform: rotate(-1522.8deg);

-ms-transform: rotate(-1522.8deg);

transform: rotate(-1522.8deg); }

body:hover .tile:nth-child(36) {

-webkit-transform: rotate(-129.6deg);

-ms-transform: rotate(-129.6deg);

transform: rotate(-129.6deg); }

.tile:nth-child(37) {

left: 71.86906%;

top: 29.46359%;

-webkit-transform: rotate(133.2deg);

-ms-transform: rotate(133.2deg);

transform: rotate(133.2deg); }

.square:hover .tile:nth-child(37) {

-webkit-transform: rotate(-1565.1deg);

-ms-transform: rotate(-1565.1deg);

transform: rotate(-1565.1deg); }

body:hover .tile:nth-child(37) {

-webkit-transform: rotate(-133.2deg);

-ms-transform: rotate(-133.2deg);

transform: rotate(-133.2deg); }

.tile:nth-child(38) {

left: 70.53641%;

top: 28.13094%;

-webkit-transform: rotate(136.8deg);

-ms-transform: rotate(136.8deg);

transform: rotate(136.8deg); }

.square:hover .tile:nth-child(38) {

-webkit-transform: rotate(-1607.4deg);

-ms-transform: rotate(-1607.4deg);

transform: rotate(-1607.4deg); }

body:hover .tile:nth-child(38) {

-webkit-transform: rotate(-136.8deg);

-ms-transform: rotate(-136.8deg);

transform: rotate(-136.8deg); }

.tile:nth-child(39) {

left: 69.12272%;

top: 26.8846%;

-webkit-transform: rotate(140.4deg);

-ms-transform: rotate(140.4deg);

transform: rotate(140.4deg); }

.square:hover .tile:nth-child(39) {

-webkit-transform: rotate(-1649.7deg);

-ms-transform: rotate(-1649.7deg);

transform: rotate(-1649.7deg); }

body:hover .tile:nth-child(39) {

-webkit-transform: rotate(-140.4deg);

-ms-transform: rotate(-140.4deg);

transform: rotate(-140.4deg); }

.tile:nth-child(40) {

left: 67.63356%;

top: 25.72949%;

-webkit-transform: rotate(144deg);

-ms-transform: rotate(144deg);

transform: rotate(144deg); }

.square:hover .tile:nth-child(40) {

-webkit-transform: rotate(-1692deg);

-ms-transform: rotate(-1692deg);

transform: rotate(-1692deg); }

body:hover .tile:nth-child(40) {

-webkit-transform: rotate(-144deg);

-ms-transform: rotate(-144deg);

transform: rotate(-144deg); }

.tile:nth-child(41) {

left: 66.0748%;

top: 24.67016%;

-webkit-transform: rotate(147.6deg);

-ms-transform: rotate(147.6deg);

transform: rotate(147.6deg); }

.square:hover .tile:nth-child(41) {

-webkit-transform: rotate(-1734.3deg);

-ms-transform: rotate(-1734.3deg);

transform: rotate(-1734.3deg); }

body:hover .tile:nth-child(41) {

-webkit-transform: rotate(-147.6deg);

-ms-transform: rotate(-147.6deg);

transform: rotate(-147.6deg); }

.tile:nth-child(42) {

left: 64.45261%;

top: 23.7108%;

-webkit-transform: rotate(151.2deg);

-ms-transform: rotate(151.2deg);

transform: rotate(151.2deg); }

.square:hover .tile:nth-child(42) {

-webkit-transform: rotate(-1776.6deg);

-ms-transform: rotate(-1776.6deg);

transform: rotate(-1776.6deg); }

body:hover .tile:nth-child(42) {

-webkit-transform: rotate(-151.2deg);

-ms-transform: rotate(-151.2deg);

transform: rotate(-151.2deg); }

.tile:nth-child(43) {

left: 62.77338%;

top: 22.85519%;

-webkit-transform: rotate(154.8deg);

-ms-transform: rotate(154.8deg);

transform: rotate(154.8deg); }

.square:hover .tile:nth-child(43) {

-webkit-transform: rotate(-1818.9deg);

-ms-transform: rotate(-1818.9deg);

transform: rotate(-1818.9deg); }

body:hover .tile:nth-child(43) {

-webkit-transform: rotate(-154.8deg);

-ms-transform: rotate(-154.8deg);

transform: rotate(-154.8deg); }

.tile:nth-child(44) {

left: 61.04374%;

top: 22.10671%;

-webkit-transform: rotate(158.4deg);

-ms-transform: rotate(158.4deg);

transform: rotate(158.4deg); }

.square:hover .tile:nth-child(44) {

-webkit-transform: rotate(-1861.2deg);

-ms-transform: rotate(-1861.2deg);

transform: rotate(-1861.2deg); }

body:hover .tile:nth-child(44) {

-webkit-transform: rotate(-158.4deg);

-ms-transform: rotate(-158.4deg);

transform: rotate(-158.4deg); }

.tile:nth-child(45) {

left: 59.27051%;

top: 21.4683%;

-webkit-transform: rotate(162deg);

-ms-transform: rotate(162deg);

transform: rotate(162deg); }

.square:hover .tile:nth-child(45) {

-webkit-transform: rotate(-1903.5deg);

-ms-transform: rotate(-1903.5deg);

transform: rotate(-1903.5deg); }

body:hover .tile:nth-child(45) {

-webkit-transform: rotate(-162deg);

-ms-transform: rotate(-162deg);

transform: rotate(-162deg); }

.tile:nth-child(46) {

left: 57.4607%;

top: 20.94251%;

-webkit-transform: rotate(165.6deg);

-ms-transform: rotate(165.6deg);

transform: rotate(165.6deg); }

.square:hover .tile:nth-child(46) {

-webkit-transform: rotate(-1945.8deg);

-ms-transform: rotate(-1945.8deg);

transform: rotate(-1945.8deg); }

body:hover .tile:nth-child(46) {

-webkit-transform: rotate(-165.6deg);

-ms-transform: rotate(-165.6deg);

transform: rotate(-165.6deg); }

.tile:nth-child(47) {

left: 55.62144%;

top: 20.53138%;

-webkit-transform: rotate(169.2deg);

-ms-transform: rotate(169.2deg);

transform: rotate(169.2deg); }

.square:hover .tile:nth-child(47) {

-webkit-transform: rotate(-1988.1deg);

-ms-transform: rotate(-1988.1deg);

transform: rotate(-1988.1deg); }

body:hover .tile:nth-child(47) {

-webkit-transform: rotate(-169.2deg);

-ms-transform: rotate(-169.2deg);

transform: rotate(-169.2deg); }

.tile:nth-child(48) {

left: 53.76%;

top: 20.23656%;

-webkit-transform: rotate(172.8deg);

-ms-transform: rotate(172.8deg);

transform: rotate(172.8deg); }

.square:hover .tile:nth-child(48) {

-webkit-transform: rotate(-2030.4deg);

-ms-transform: rotate(-2030.4deg);

transform: rotate(-2030.4deg); }

body:hover .tile:nth-child(48) {

-webkit-transform: rotate(-172.8deg);

-ms-transform: rotate(-172.8deg);

transform: rotate(-172.8deg); }

.tile:nth-child(49) {

left: 51.88372%;

top: 20.0592%;

-webkit-transform: rotate(176.4deg);

-ms-transform: rotate(176.4deg);

transform: rotate(176.4deg); }

.square:hover .tile:nth-child(49) {

-webkit-transform: rotate(-2072.7deg);

-ms-transform: rotate(-2072.7deg);

transform: rotate(-2072.7deg); }

body:hover .tile:nth-child(49) {

-webkit-transform: rotate(-176.4deg);

-ms-transform: rotate(-176.4deg);

transform: rotate(-176.4deg); }

.tile:nth-child(50) {

left: 50%;

top: 20%;

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg); }

.square:hover .tile:nth-child(50) {

-webkit-transform: rotate(-2115deg);

-ms-transform: rotate(-2115deg);

transform: rotate(-2115deg); }

body:hover .tile:nth-child(50) {

-webkit-transform: rotate(-180deg);

-ms-transform: rotate(-180deg);

transform: rotate(-180deg); }

.tile:nth-child(51) {

left: 48.11628%;

top: 20.0592%;

-webkit-transform: rotate(183.6deg);

-ms-transform: rotate(183.6deg);

transform: rotate(183.6deg); }

.square:hover .tile:nth-child(51) {

-webkit-transform: rotate(-2157.3deg);

-ms-transform: rotate(-2157.3deg);

transform: rotate(-2157.3deg); }

body:hover .tile:nth-child(51) {

-webkit-transform: rotate(-183.6deg);

-ms-transform: rotate(-183.6deg);

transform: rotate(-183.6deg); }

.tile:nth-child(52) {

left: 46.24%;

top: 20.23656%;

-webkit-transform: rotate(187.2deg);

-ms-transform: rotate(187.2deg);

transform: rotate(187.2deg); }

.square:hover .tile:nth-child(52) {

-webkit-transform: rotate(-2199.6deg);

-ms-transform: rotate(-2199.6deg);

transform: rotate(-2199.6deg); }

body:hover .tile:nth-child(52) {

-webkit-transform: rotate(-187.2deg);

-ms-transform: rotate(-187.2deg);

transform: rotate(-187.2deg); }

.tile:nth-child(53) {

left: 44.37856%;

top: 20.53138%;

-webkit-transform: rotate(190.8deg);

-ms-transform: rotate(190.8deg);

transform: rotate(190.8deg); }

.square:hover .tile:nth-child(53) {

-webkit-transform: rotate(-2241.9deg);

-ms-transform: rotate(-2241.9deg);

transform: rotate(-2241.9deg); }

body:hover .tile:nth-child(53) {

-webkit-transform: rotate(-190.8deg);

-ms-transform: rotate(-190.8deg);

transform: rotate(-190.8deg); }

.tile:nth-child(54) {

left: 42.5393%;

top: 20.94251%;

-webkit-transform: rotate(194.4deg);

-ms-transform: rotate(194.4deg);

transform: rotate(194.4deg); }

.square:hover .tile:nth-child(54) {

-webkit-transform: rotate(-2284.2deg);

-ms-transform: rotate(-2284.2deg);

transform: rotate(-2284.2deg); }

body:hover .tile:nth-child(54) {

-webkit-transform: rotate(-194.4deg);

-ms-transform: rotate(-194.4deg);

transform: rotate(-194.4deg); }

.tile:nth-child(55) {

left: 40.72949%;

top: 21.4683%;

-webkit-transform: rotate(198deg);

-ms-transform: rotate(198deg);

transform: rotate(198deg); }

.square:hover .tile:nth-child(55) {

-webkit-transform: rotate(-2326.5deg);

-ms-transform: rotate(-2326.5deg);

transform: rotate(-2326.5deg); }

body:hover .tile:nth-child(55) {

-webkit-transform: rotate(-198deg);

-ms-transform: rotate(-198deg);

transform: rotate(-198deg); }

.tile:nth-child(56) {

left: 38.95626%;

top: 22.10671%;

-webkit-transform: rotate(201.6deg);

-ms-transform: rotate(201.6deg);

transform: rotate(201.6deg); }

.square:hover .tile:nth-child(56) {

-webkit-transform: rotate(-2368.8deg);

-ms-transform: rotate(-2368.8deg);

transform: rotate(-2368.8deg); }

body:hover .tile:nth-child(56) {

-webkit-transform: rotate(-201.6deg);

-ms-transform: rotate(-201.6deg);

transform: rotate(-201.6deg); }

.tile:nth-child(57) {

left: 37.22662%;

top: 22.85519%;

-webkit-transform: rotate(205.2deg);

-ms-transform: rotate(205.2deg);

transform: rotate(205.2deg); }

.square:hover .tile:nth-child(57) {

-webkit-transform: rotate(-2411.1deg);

-ms-transform: rotate(-2411.1deg);

transform: rotate(-2411.1deg); }

body:hover .tile:nth-child(57) {

-webkit-transform: rotate(-205.2deg);

-ms-transform: rotate(-205.2deg);

transform: rotate(-205.2deg); }

.tile:nth-child(58) {

left: 35.54739%;

top: 23.7108%;

-webkit-transform: rotate(208.8deg);

-ms-transform: rotate(208.8deg);

transform: rotate(208.8deg); }

.square:hover .tile:nth-child(58) {

-webkit-transform: rotate(-2453.4deg);

-ms-transform: rotate(-2453.4deg);

transform: rotate(-2453.4deg); }

body:hover .tile:nth-child(58) {

-webkit-transform: rotate(-208.8deg);

-ms-transform: rotate(-208.8deg);

transform: rotate(-208.8deg); }

.tile:nth-child(59) {

left: 33.9252%;

top: 24.67016%;

-webkit-transform: rotate(212.4deg);

-ms-transform: rotate(212.4deg);

transform: rotate(212.4deg); }

.square:hover .tile:nth-child(59) {

-webkit-transform: rotate(-2495.7deg);

-ms-transform: rotate(-2495.7deg);

transform: rotate(-2495.7deg); }

body:hover .tile:nth-child(59) {

-webkit-transform: rotate(-212.4deg);

-ms-transform: rotate(-212.4deg);

transform: rotate(-212.4deg); }

.tile:nth-child(60) {

left: 32.36644%;

top: 25.72949%;

-webkit-transform: rotate(216deg);

-ms-transform: rotate(216deg);

transform: rotate(216deg); }

.square:hover .tile:nth-child(60) {

-webkit-transform: rotate(-2538deg);

-ms-transform: rotate(-2538deg);

transform: rotate(-2538deg); }

body:hover .tile:nth-child(60) {

-webkit-transform: rotate(-216deg);

-ms-transform: rotate(-216deg);

transform: rotate(-216deg); }

.tile:nth-child(61) {

left: 30.87728%;

top: 26.8846%;

-webkit-transform: rotate(219.6deg);

-ms-transform: rotate(219.6deg);

transform: rotate(219.6deg); }

.square:hover .tile:nth-child(61) {

-webkit-transform: rotate(-2580.3deg);

-ms-transform: rotate(-2580.3deg);

transform: rotate(-2580.3deg); }

body:hover .tile:nth-child(61) {

-webkit-transform: rotate(-219.6deg);

-ms-transform: rotate(-219.6deg);

transform: rotate(-219.6deg); }

.tile:nth-child(62) {

left: 29.46359%;

top: 28.13094%;

-webkit-transform: rotate(223.2deg);

-ms-transform: rotate(223.2deg);

transform: rotate(223.2deg); }

.square:hover .tile:nth-child(62) {

-webkit-transform: rotate(-2622.6deg);

-ms-transform: rotate(-2622.6deg);

transform: rotate(-2622.6deg); }

body:hover .tile:nth-child(62) {

-webkit-transform: rotate(-223.2deg);

-ms-transform: rotate(-223.2deg);

transform: rotate(-223.2deg); }

.tile:nth-child(63) {

left: 28.13094%;

top: 29.46359%;

-webkit-transform: rotate(226.8deg);

-ms-transform: rotate(226.8deg);

transform: rotate(226.8deg); }

.square:hover .tile:nth-child(63) {

-webkit-transform: rotate(-2664.9deg);

-ms-transform: rotate(-2664.9deg);

transform: rotate(-2664.9deg); }

body:hover .tile:nth-child(63) {

-webkit-transform: rotate(-226.8deg);

-ms-transform: rotate(-226.8deg);

transform: rotate(-226.8deg); }

.tile:nth-child(64) {

left: 26.8846%;

top: 30.87728%;

-webkit-transform: rotate(230.4deg);

-ms-transform: rotate(230.4deg);

transform: rotate(230.4deg); }

.square:hover .tile:nth-child(64) {

-webkit-transform: rotate(-2707.2deg);

-ms-transform: rotate(-2707.2deg);

transform: rotate(-2707.2deg); }

body:hover .tile:nth-child(64) {

-webkit-transform: rotate(-230.4deg);

-ms-transform: rotate(-230.4deg);

transform: rotate(-230.4deg); }

.tile:nth-child(65) {

left: 25.72949%;

top: 32.36644%;

-webkit-transform: rotate(234deg);

-ms-transform: rotate(234deg);

transform: rotate(234deg); }

.square:hover .tile:nth-child(65) {

-webkit-transform: rotate(-2749.5deg);

-ms-transform: rotate(-2749.5deg);

transform: rotate(-2749.5deg); }

body:hover .tile:nth-child(65) {

-webkit-transform: rotate(-234deg);

-ms-transform: rotate(-234deg);

transform: rotate(-234deg); }

.tile:nth-child(66) {

left: 24.67016%;

top: 33.9252%;

-webkit-transform: rotate(237.6deg);

-ms-transform: rotate(237.6deg);

transform: rotate(237.6deg); }

.square:hover .tile:nth-child(66) {

-webkit-transform: rotate(-2791.8deg);

-ms-transform: rotate(-2791.8deg);

transform: rotate(-2791.8deg); }

body:hover .tile:nth-child(66) {

-webkit-transform: rotate(-237.6deg);

-ms-transform: rotate(-237.6deg);

transform: rotate(-237.6deg); }

.tile:nth-child(67) {

left: 23.7108%;

top: 35.54739%;

-webkit-transform: rotate(241.2deg);

-ms-transform: rotate(241.2deg);

transform: rotate(241.2deg); }

.square:hover .tile:nth-child(67) {

-webkit-transform: rotate(-2834.1deg);

-ms-transform: rotate(-2834.1deg);

transform: rotate(-2834.1deg); }

body:hover .tile:nth-child(67) {

-webkit-transform: rotate(-241.2deg);

-ms-transform: rotate(-241.2deg);

transform: rotate(-241.2deg); }

.tile:nth-child(68) {

left: 22.85519%;

top: 37.22662%;

-webkit-transform: rotate(244.8deg);

-ms-transform: rotate(244.8deg);

transform: rotate(244.8deg); }

.square:hover .tile:nth-child(68) {

-webkit-transform: rotate(-2876.4deg);

-ms-transform: rotate(-2876.4deg);

transform: rotate(-2876.4deg); }

body:hover .tile:nth-child(68) {

-webkit-transform: rotate(-244.8deg);

-ms-transform: rotate(-244.8deg);

transform: rotate(-244.8deg); }

.tile:nth-child(69) {

left: 22.10671%;

top: 38.95626%;

-webkit-transform: rotate(248.4deg);

-ms-transform: rotate(248.4deg);

transform: rotate(248.4deg); }

.square:hover .tile:nth-child(69) {

-webkit-transform: rotate(-2918.7deg);

-ms-transform: rotate(-2918.7deg);

transform: rotate(-2918.7deg); }

body:hover .tile:nth-child(69) {

-webkit-transform: rotate(-248.4deg);

-ms-transform: rotate(-248.4deg);

transform: rotate(-248.4deg); }

.tile:nth-child(70) {

left: 21.4683%;

top: 40.72949%;

-webkit-transform: rotate(252deg);

-ms-transform: rotate(252deg);

transform: rotate(252deg); }

.square:hover .tile:nth-child(70) {

-webkit-transform: rotate(-2961deg);

-ms-transform: rotate(-2961deg);

transform: rotate(-2961deg); }

body:hover .tile:nth-child(70) {

-webkit-transform: rotate(-252deg);

-ms-transform: rotate(-252deg);

transform: rotate(-252deg); }

.tile:nth-child(71) {

left: 20.94251%;

top: 42.5393%;

-webkit-transform: rotate(255.6deg);

-ms-transform: rotate(255.6deg);

transform: rotate(255.6deg); }

.square:hover .tile:nth-child(71) {

-webkit-transform: rotate(-3003.3deg);

-ms-transform: rotate(-3003.3deg);

transform: rotate(-3003.3deg); }

body:hover .tile:nth-child(71) {

-webkit-transform: rotate(-255.6deg);

-ms-transform: rotate(-255.6deg);

transform: rotate(-255.6deg); }

.tile:nth-child(72) {

left: 20.53138%;

top: 44.37856%;

-webkit-transform: rotate(259.2deg);

-ms-transform: rotate(259.2deg);

transform: rotate(259.2deg); }

.square:hover .tile:nth-child(72) {

-webkit-transform: rotate(-3045.6deg);

-ms-transform: rotate(-3045.6deg);

transform: rotate(-3045.6deg); }

body:hover .tile:nth-child(72) {

-webkit-transform: rotate(-259.2deg);

-ms-transform: rotate(-259.2deg);

transform: rotate(-259.2deg); }

.tile:nth-child(73) {

left: 20.23656%;

top: 46.24%;

-webkit-transform: rotate(262.8deg);

-ms-transform: rotate(262.8deg);

transform: rotate(262.8deg); }

.square:hover .tile:nth-child(73) {

-webkit-transform: rotate(-3087.9deg);

-ms-transform: rotate(-3087.9deg);

transform: rotate(-3087.9deg); }

body:hover .tile:nth-child(73) {

-webkit-transform: rotate(-262.8deg);

-ms-transform: rotate(-262.8deg);

transform: rotate(-262.8deg); }

.tile:nth-child(74) {

left: 20.0592%;

top: 48.11628%;

-webkit-transform: rotate(266.4deg);

-ms-transform: rotate(266.4deg);

transform: rotate(266.4deg); }

.square:hover .tile:nth-child(74) {

-webkit-transform: rotate(-3130.2deg);

-ms-transform: rotate(-3130.2deg);

transform: rotate(-3130.2deg); }

body:hover .tile:nth-child(74) {

-webkit-transform: rotate(-266.4deg);

-ms-transform: rotate(-266.4deg);

transform: rotate(-266.4deg); }

.tile:nth-child(75) {

left: 20%;

top: 50%;

-webkit-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg); }

.square:hover .tile:nth-child(75) {

-webkit-transform: rotate(-3172.5deg);

-ms-transform: rotate(-3172.5deg);

transform: rotate(-3172.5deg); }

body:hover .tile:nth-child(75) {

-webkit-transform: rotate(-270deg);

-ms-transform: rotate(-270deg);

transform: rotate(-270deg); }

.tile:nth-child(76) {

left: 20.0592%;

top: 51.88372%;

-webkit-transform: rotate(273.6deg);

-ms-transform: rotate(273.6deg);

transform: rotate(273.6deg); }

.square:hover .tile:nth-child(76) {

-webkit-transform: rotate(-3214.8deg);

-ms-transform: rotate(-3214.8deg);

transform: rotate(-3214.8deg); }

body:hover .tile:nth-child(76) {

-webkit-transform: rotate(-273.6deg);

-ms-transform: rotate(-273.6deg);

transform: rotate(-273.6deg); }

.tile:nth-child(77) {

left: 20.23656%;

top: 53.76%;

-webkit-transform: rotate(277.2deg);

-ms-transform: rotate(277.2deg);

transform: rotate(277.2deg); }

.square:hover .tile:nth-child(77) {

-webkit-transform: rotate(-3257.1deg);

-ms-transform: rotate(-3257.1deg);

transform: rotate(-3257.1deg); }

body:hover .tile:nth-child(77) {

-webkit-transform: rotate(-277.2deg);

-ms-transform: rotate(-277.2deg);

transform: rotate(-277.2deg); }

.tile:nth-child(78) {

left: 20.53138%;

top: 55.62144%;

-webkit-transform: rotate(280.8deg);

-ms-transform: rotate(280.8deg);

transform: rotate(280.8deg); }

.square:hover .tile:nth-child(78) {

-webkit-transform: rotate(-3299.4deg);

-ms-transform: rotate(-3299.4deg);

transform: rotate(-3299.4deg); }

body:hover .tile:nth-child(78) {

-webkit-transform: rotate(-280.8deg);

-ms-transform: rotate(-280.8deg);

transform: rotate(-280.8deg); }

.tile:nth-child(79) {

left: 20.94251%;

top: 57.4607%;

-webkit-transform: rotate(284.4deg);

-ms-transform: rotate(284.4deg);

transform: rotate(284.4deg); }

.square:hover .tile:nth-child(79) {

-webkit-transform: rotate(-3341.7deg);

-ms-transform: rotate(-3341.7deg);

transform: rotate(-3341.7deg); }

body:hover .tile:nth-child(79) {

-webkit-transform: rotate(-284.4deg);

-ms-transform: rotate(-284.4deg);

transform: rotate(-284.4deg); }

.tile:nth-child(80) {

left: 21.4683%;

top: 59.27051%;

-webkit-transform: rotate(288deg);

-ms-transform: rotate(288deg);

transform: rotate(288deg); }

.square:hover .tile:nth-child(80) {

-webkit-transform: rotate(-3384deg);

-ms-transform: rotate(-3384deg);

transform: rotate(-3384deg); }

body:hover .tile:nth-child(80) {

-webkit-transform: rotate(-288deg);

-ms-transform: rotate(-288deg);

transform: rotate(-288deg); }

.tile:nth-child(81) {

left: 22.10671%;

top: 61.04374%;

-webkit-transform: rotate(291.6deg);

-ms-transform: rotate(291.6deg);

transform: rotate(291.6deg); }

.square:hover .tile:nth-child(81) {

-webkit-transform: rotate(-3426.3deg);

-ms-transform: rotate(-3426.3deg);

transform: rotate(-3426.3deg); }

body:hover .tile:nth-child(81) {

-webkit-transform: rotate(-291.6deg);

-ms-transform: rotate(-291.6deg);

transform: rotate(-291.6deg); }

.tile:nth-child(82) {

left: 22.85519%;

top: 62.77338%;

-webkit-transform: rotate(295.2deg);

-ms-transform: rotate(295.2deg);

transform: rotate(295.2deg); }

.square:hover .tile:nth-child(82) {

-webkit-transform: rotate(-3468.6deg);

-ms-transform: rotate(-3468.6deg);

transform: rotate(-3468.6deg); }

body:hover .tile:nth-child(82) {

-webkit-transform: rotate(-295.2deg);

-ms-transform: rotate(-295.2deg);

transform: rotate(-295.2deg); }

.tile:nth-child(83) {

left: 23.7108%;

top: 64.45261%;

-webkit-transform: rotate(298.8deg);

-ms-transform: rotate(298.8deg);

transform: rotate(298.8deg); }

.square:hover .tile:nth-child(83) {

-webkit-transform: rotate(-3510.9deg);

-ms-transform: rotate(-3510.9deg);

transform: rotate(-3510.9deg); }

body:hover .tile:nth-child(83) {

-webkit-transform: rotate(-298.8deg);

-ms-transform: rotate(-298.8deg);

transform: rotate(-298.8deg); }

.tile:nth-child(84) {

left: 24.67016%;

top: 66.0748%;

-webkit-transform: rotate(302.4deg);

-ms-transform: rotate(302.4deg);

transform: rotate(302.4deg); }

.square:hover .tile:nth-child(84) {

-webkit-transform: rotate(-3553.2deg);

-ms-transform: rotate(-3553.2deg);

transform: rotate(-3553.2deg); }

body:hover .tile:nth-child(84) {

-webkit-transform: rotate(-302.4deg);

-ms-transform: rotate(-302.4deg);

transform: rotate(-302.4deg); }

.tile:nth-child(85) {

left: 25.72949%;

top: 67.63356%;

-webkit-transform: rotate(306deg);

-ms-transform: rotate(306deg);

transform: rotate(306deg); }

.square:hover .tile:nth-child(85) {

-webkit-transform: rotate(-3595.5deg);

-ms-transform: rotate(-3595.5deg);

transform: rotate(-3595.5deg); }

body:hover .tile:nth-child(85) {

-webkit-transform: rotate(-306deg);

-ms-transform: rotate(-306deg);

transform: rotate(-306deg); }

.tile:nth-child(86) {

left: 26.8846%;

top: 69.12272%;

-webkit-transform: rotate(309.6deg);

-ms-transform: rotate(309.6deg);

transform: rotate(309.6deg); }

.square:hover .tile:nth-child(86) {

-webkit-transform: rotate(-3637.8deg);

-ms-transform: rotate(-3637.8deg);

transform: rotate(-3637.8deg); }

body:hover .tile:nth-child(86) {

-webkit-transform: rotate(-309.6deg);

-ms-transform: rotate(-309.6deg);

transform: rotate(-309.6deg); }

.tile:nth-child(87) {

left: 28.13094%;

top: 70.53641%;

-webkit-transform: rotate(313.2deg);

-ms-transform: rotate(313.2deg);

transform: rotate(313.2deg); }

.square:hover .tile:nth-child(87) {

-webkit-transform: rotate(-3680.1deg);

-ms-transform: rotate(-3680.1deg);

transform: rotate(-3680.1deg); }

body:hover .tile:nth-child(87) {

-webkit-transform: rotate(-313.2deg);

-ms-transform: rotate(-313.2deg);

transform: rotate(-313.2deg); }

.tile:nth-child(88) {

left: 29.46359%;

top: 71.86906%;

-webkit-transform: rotate(316.8deg);

-ms-transform: rotate(316.8deg);

transform: rotate(316.8deg); }

.square:hover .tile:nth-child(88) {

-webkit-transform: rotate(-3722.4deg);

-ms-transform: rotate(-3722.4deg);

transform: rotate(-3722.4deg); }

body:hover .tile:nth-child(88) {

-webkit-transform: rotate(-316.8deg);

-ms-transform: rotate(-316.8deg);

transform: rotate(-316.8deg); }

.tile:nth-child(89) {

left: 30.87728%;

top: 73.1154%;

-webkit-transform: rotate(320.4deg);

-ms-transform: rotate(320.4deg);

transform: rotate(320.4deg); }

.square:hover .tile:nth-child(89) {

-webkit-transform: rotate(-3764.7deg);

-ms-transform: rotate(-3764.7deg);

transform: rotate(-3764.7deg); }

body:hover .tile:nth-child(89) {

-webkit-transform: rotate(-320.4deg);

-ms-transform: rotate(-320.4deg);

transform: rotate(-320.4deg); }

.tile:nth-child(90) {

left: 32.36644%;

top: 74.27051%;

-webkit-transform: rotate(324deg);

-ms-transform: rotate(324deg);

transform: rotate(324deg); }

.square:hover .tile:nth-child(90) {

-webkit-transform: rotate(-3807deg);

-ms-transform: rotate(-3807deg);

transform: rotate(-3807deg); }

body:hover .tile:nth-child(90) {

-webkit-transform: rotate(-324deg);

-ms-transform: rotate(-324deg);

transform: rotate(-324deg); }

.tile:nth-child(91) {

left: 33.9252%;

top: 75.32984%;

-webkit-transform: rotate(327.6deg);

-ms-transform: rotate(327.6deg);

transform: rotate(327.6deg); }

.square:hover .tile:nth-child(91) {

-webkit-transform: rotate(-3849.3deg);

-ms-transform: rotate(-3849.3deg);

transform: rotate(-3849.3deg); }

body:hover .tile:nth-child(91) {

-webkit-transform: rotate(-327.6deg);

-ms-transform: rotate(-327.6deg);

transform: rotate(-327.6deg); }

.tile:nth-child(92) {

left: 35.54739%;

top: 76.2892%;

-webkit-transform: rotate(331.2deg);

-ms-transform: rotate(331.2deg);

transform: rotate(331.2deg); }

.square:hover .tile:nth-child(92) {

-webkit-transform: rotate(-3891.6deg);

-ms-transform: rotate(-3891.6deg);

transform: rotate(-3891.6deg); }

body:hover .tile:nth-child(92) {

-webkit-transform: rotate(-331.2deg);

-ms-transform: rotate(-331.2deg);

transform: rotate(-331.2deg); }

.tile:nth-child(93) {

left: 37.22662%;

top: 77.14481%;

-webkit-transform: rotate(334.8deg);

-ms-transform: rotate(334.8deg);

transform: rotate(334.8deg); }

.square:hover .tile:nth-child(93) {

-webkit-transform: rotate(-3933.9deg);

-ms-transform: rotate(-3933.9deg);

transform: rotate(-3933.9deg); }

body:hover .tile:nth-child(93) {

-webkit-transform: rotate(-334.8deg);

-ms-transform: rotate(-334.8deg);

transform: rotate(-334.8deg); }

.tile:nth-child(94) {

left: 38.95626%;

top: 77.89329%;

-webkit-transform: rotate(338.4deg);

-ms-transform: rotate(338.4deg);

transform: rotate(338.4deg); }

.square:hover .tile:nth-child(94) {

-webkit-transform: rotate(-3976.2deg);

-ms-transform: rotate(-3976.2deg);

transform: rotate(-3976.2deg); }

body:hover .tile:nth-child(94) {

-webkit-transform: rotate(-338.4deg);

-ms-transform: rotate(-338.4deg);

transform: rotate(-338.4deg); }

.tile:nth-child(95) {

left: 40.72949%;

top: 78.5317%;

-webkit-transform: rotate(342deg);

-ms-transform: rotate(342deg);

transform: rotate(342deg); }

.square:hover .tile:nth-child(95) {

-webkit-transform: rotate(-4018.5deg);

-ms-transform: rotate(-4018.5deg);

transform: rotate(-4018.5deg); }

body:hover .tile:nth-child(95) {

-webkit-transform: rotate(-342deg);

-ms-transform: rotate(-342deg);

transform: rotate(-342deg); }

.tile:nth-child(96) {

left: 42.5393%;

top: 79.05749%;

-webkit-transform: rotate(345.6deg);

-ms-transform: rotate(345.6deg);

transform: rotate(345.6deg); }

.square:hover .tile:nth-child(96) {

-webkit-transform: rotate(-4060.8deg);

-ms-transform: rotate(-4060.8deg);

transform: rotate(-4060.8deg); }

body:hover .tile:nth-child(96) {

-webkit-transform: rotate(-345.6deg);

-ms-transform: rotate(-345.6deg);

transform: rotate(-345.6deg); }

.tile:nth-child(97) {

left: 44.37856%;

top: 79.46862%;

-webkit-transform: rotate(349.2deg);

-ms-transform: rotate(349.2deg);

transform: rotate(349.2deg); }

.square:hover .tile:nth-child(97) {

-webkit-transform: rotate(-4103.1deg);

-ms-transform: rotate(-4103.1deg);

transform: rotate(-4103.1deg); }

body:hover .tile:nth-child(97) {

-webkit-transform: rotate(-349.2deg);

-ms-transform: rotate(-349.2deg);

transform: rotate(-349.2deg); }

.tile:nth-child(98) {

left: 46.24%;

top: 79.76344%;

-webkit-transform: rotate(352.8deg);

-ms-transform: rotate(352.8deg);

transform: rotate(352.8deg); }

.square:hover .tile:nth-child(98) {

-webkit-transform: rotate(-4145.4deg);

-ms-transform: rotate(-4145.4deg);

transform: rotate(-4145.4deg); }

body:hover .tile:nth-child(98) {

-webkit-transform: rotate(-352.8deg);

-ms-transform: rotate(-352.8deg);

transform: rotate(-352.8deg); }

.tile:nth-child(99) {

left: 48.11628%;

top: 79.9408%;

-webkit-transform: rotate(356.4deg);

-ms-transform: rotate(356.4deg);

transform: rotate(356.4deg); }

.square:hover .tile:nth-child(99) {

-webkit-transform: rotate(-4187.7deg);

-ms-transform: rotate(-4187.7deg);

transform: rotate(-4187.7deg); }

body:hover .tile:nth-child(99) {

-webkit-transform: rotate(-356.4deg);

-ms-transform: rotate(-356.4deg);

transform: rotate(-356.4deg); }

.tile:nth-child(100) {

left: 50%;

top: 80%;

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg); }

.square:hover .tile:nth-child(100) {

-webkit-transform: rotate(-4230deg);

-ms-transform: rotate(-4230deg);

transform: rotate(-4230deg); }

body:hover .tile:nth-child(100) {

-webkit-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

transform: rotate(-360deg); }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值