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); }
css让div旋转,CSS3 独立的DIV元素旋转相关推荐
- css3的动画特效--元素旋转（transition，animation）
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
- html 背景图片自动旋转,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景 使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...
- html如何图片立体自动旋转,css3如何让图片不停旋转？
本篇文章将要给大家详细介绍如何使用css3让图片实现不停旋转的效果,我们在进行网页页面设计时,经常会遇到各种关于图片展示的问题,比如有的需要让图片圆角展示.图片点击放大展示等等效果. 下面主要就给大家 ...
- html3d盒子旋转,css3+javascript怎么做一个旋转的3d盒子？
今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来 今天带了css3新属性3d #a{ width: 200px; height: 200px; margin: 20 ...
- css中设置图片旋转45度,css 实现缓和变量，鼠标悬停时元素旋转45度动画
可重复使用的变数transition-timing-function 属性,比内置更强大ease ,ease-in ,ease-out 和ease-in-out . HTML CSS :root { ...
- html添加css过渡效果,html – 使用css3对show / hide元素的css过渡效果[复制]
对于转换,您需要2个值(开始/结束),可以按步骤,数字进行划分. none和block不能并且只能从一个切换到另一个,最终可能会延迟它. 折衷方案可能是使用max-height并设置溢出,以防短时间值 ...
- css让div旋转,CSS3 transform 属性 旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
- web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
- [css] 如何使用css3实现一个div设置多张背景图片？
[css] 如何使用css3实现一个div设置多张背景图片? background-image:url("1.jpg"),url("2.jpg"),url(&q ...
最新文章
- 138.ssm 框架下 导出Excel
- 消息称苹果正在组建新智能家居团队
- 静态局部变量和全局变量的区别！
- 我的python学习之路_我的Python学习之路
- Linux 常用命令：文本查看篇
- 使用maven导入任意jar包
- centos 安装mysql_Centos 下mysql数据库完整安装过程
- 初一音乐计算机教学方案,人音版七年级音乐教案
- 抖音音乐品牌升级 推出“炙热星河”音乐人服务平台
- Java：实现文件批量导入导出实践（兼容xls,xlsx）
- 10.22 Ext JS 快速开发工具
- 家里电脑是win10，但开机都要3分钟，请问怎么提快电脑速度？
- django3与vue3本地搭建
- 中指北针怎么画_木工图纸怎么快速看懂？助你看懂施工图的9个技巧
- Cannot uninstall ‘requests’. It is a distutils installed project and thus we cannot accurately deter
- 轻快pdf阅读器 电子书阅读软件电脑版
- stm32之I2C编程前期准备
- 概要设计模板 外部接口设计_0226 rest接口设计
- Qt Event（Qt事件）
- CE扫雷20211031