Individual Element rotation

Developer
Luuk Lamers
Size
6,597 Kb
Views
6,072
  1. Individual Element rotation Previews
  2. Individual Element rotation HTML Codes
  3. Individual Element rotation CSS Codes

How do I make an individual element rotation?

Sin & cos to position, individual rotation on normal, body hover and .square hover state. What is a individual element rotation? How do you make a individual element rotation? This script and codes were developed by Luuk Lamers on 22 January 2023, Sunday.

Individual Element rotation Previews
IQ Test

Individual Element rotation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Individual Element rotation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="square">hover me
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
<div class="tile">4</div>
<div class="tile">5</div>
<div class="tile">6</div>
<div class="tile">7</div>
<div class="tile">8</div>
<div class="tile">9</div>
<div class="tile">10</div>
<div class="tile">11</div>
<div class="tile">12</div>
<div class="tile">13</div>
<div class="tile">14</div>
<div class="tile">15</div>
<div class="tile">16</div>
<div class="tile">17</div>
<div class="tile">18</div>
<div class="tile">19</div>
<div class="tile">20</div>
<div class="tile">21</div>
<div class="tile">22</div>
<div class="tile">23</div>
<div class="tile">24</div>
<div class="tile">25</div>
<div class="tile">26</div>
<div class="tile">27</div>
<div class="tile">28</div>
<div class="tile">29</div>
<div class="tile">30</div>
<div class="tile">31</div>
<div class="tile">32</div>
<div class="tile">33</div>
<div class="tile">34</div>
<div class="tile">35</div>
<div class="tile">36</div>
<div class="tile">37</div>
<div class="tile">38</div>
<div class="tile">39</div>
<div class="tile">40</div>
<div class="tile">41</div>
<div class="tile">42</div>
<div class="tile">43</div>
<div class="tile">44</div>
<div class="tile">45</div>
<div class="tile">46</div>
<div class="tile">47</div>
<div class="tile">48</div>
<div class="tile">49</div>
<div class="tile">50</div>
<div class="tile">51</div>
<div class="tile">52</div>
<div class="tile">53</div>
<div class="tile">54</div>
<div class="tile">55</div>
<div class="tile">56</div>
<div class="tile">57</div>
<div class="tile">58</div>
<div class="tile">59</div>
<div class="tile">60</div>
<div class="tile">61</div>
<div class="tile">62</div>
<div class="tile">63</div>
<div class="tile">64</div>
<div class="tile">65</div>
<div class="tile">66</div>
<div class="tile">67</div>
<div class="tile">68</div>
<div class="tile">69</div>
<div class="tile">70</div>
<div class="tile">71</div>
<div class="tile">72</div>
<div class="tile">73</div>
<div class="tile">74</div>
<div class="tile">75</div>
<div class="tile">76</div>
<div class="tile">77</div>
<div class="tile">78</div>
<div class="tile">79</div>
<div class="tile">80</div>
<div class="tile">81</div>
<div class="tile">82</div>
<div class="tile">83</div>
<div class="tile">84</div>
<div class="tile">85</div>
<div class="tile">86</div>
<div class="tile">87</div>
<div class="tile">88</div>
<div class="tile">89</div>
<div class="tile">90</div>
<div class="tile">91</div>
<div class="tile">92</div>
<div class="tile">93</div>
<div class="tile">94</div>
<div class="tile">95</div>
<div class="tile">96</div>
<div class="tile">97</div>
<div class="tile">98</div>
<div class="tile">99</div>
<div class="tile">100</div>
</div>
</body>
</html>

Individual Element rotation - Script Codes CSS Codes

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); transform: translate3D(0, 0, 0);
}
.tile { display: block; background: royalblue; background: -webkit-linear-gradient(royalblue, #99afef); background: linear-gradient(royalblue, #99afef); border-radius: 2px; box-shadow: 0 0 2px -1px royalblue; width: 1%; height: 10%; overflow: hidden; position: absolute; -webkit-transform-origin: top center; transform-origin: top center; -webkit-transition: -webkit-transform 2s ease; transition: -webkit-transform 2s ease; transition: transform 2s ease; transition: transform 2s ease, -webkit-transform 2s ease; text-indent: -100px;
}
.tile:nth-child(1) { left: 51.88371559%; top: 79.94080185%; -webkit-transform: rotate(3.6deg); transform: rotate(3.6deg);
}
.square:hover .tile:nth-child(1) { -webkit-transform: rotate(-42.3deg); transform: rotate(-42.3deg);
}
body:hover .tile:nth-child(1) { -webkit-transform: rotate(-3.6deg); transform: rotate(-3.6deg);
}
.tile:nth-child(2) { left: 53.75999701%; top: 79.76344104%; -webkit-transform: rotate(7.2deg); transform: rotate(7.2deg);
}
.square:hover .tile:nth-child(2) { -webkit-transform: rotate(-84.6deg); transform: rotate(-84.6deg);
}
body:hover .tile:nth-child(2) { -webkit-transform: rotate(-7.2deg); transform: rotate(-7.2deg);
}
.tile:nth-child(3) { left: 55.62143944%; top: 79.46861752%; -webkit-transform: rotate(10.8deg); transform: rotate(10.8deg);
}
.square:hover .tile:nth-child(3) { -webkit-transform: rotate(-126.9deg); transform: rotate(-126.9deg);
}
body:hover .tile:nth-child(3) { -webkit-transform: rotate(-10.8deg); transform: rotate(-10.8deg);
}
.tile:nth-child(4) { left: 57.46069661%; top: 79.05749483%; -webkit-transform: rotate(14.4deg); transform: rotate(14.4deg);
}
.square:hover .tile:nth-child(4) { -webkit-transform: rotate(-169.2deg); transform: rotate(-169.2deg);
}
body:hover .tile:nth-child(4) { -webkit-transform: rotate(-14.4deg); transform: rotate(-14.4deg);
}
.tile:nth-child(5) { left: 59.27050983%; top: 78.53169549%; -webkit-transform: rotate(18deg); transform: rotate(18deg);
}
.square:hover .tile:nth-child(5) { -webkit-transform: rotate(-211.5deg); transform: rotate(-211.5deg);
}
body:hover .tile:nth-child(5) { -webkit-transform: rotate(-18deg); transform: rotate(-18deg);
}
.tile:nth-child(6) { left: 61.04373658%; top: 77.89329458%; -webkit-transform: rotate(21.6deg); transform: rotate(21.6deg);
}
.square:hover .tile:nth-child(6) { -webkit-transform: rotate(-253.8deg); transform: rotate(-253.8deg);
}
body:hover .tile:nth-child(6) { -webkit-transform: rotate(-21.6deg); transform: rotate(-21.6deg);
}
.tile:nth-child(7) { left: 62.77337875%; top: 77.14481157%; -webkit-transform: rotate(25.2deg); transform: rotate(25.2deg);
}
.square:hover .tile:nth-child(7) { -webkit-transform: rotate(-296.1deg); transform: rotate(-296.1deg);
}
body:hover .tile:nth-child(7) { -webkit-transform: rotate(-25.2deg); transform: rotate(-25.2deg);
}
.tile:nth-child(8) { left: 64.45261022%; top: 76.2892004%; -webkit-transform: rotate(28.8deg); transform: rotate(28.8deg);
}
.square:hover .tile:nth-child(8) { -webkit-transform: rotate(-338.4deg); transform: rotate(-338.4deg);
}
body:hover .tile:nth-child(8) { -webkit-transform: rotate(-28.8deg); transform: rotate(-28.8deg);
}
.tile:nth-child(9) { left: 66.07480385%; top: 75.32983777%; -webkit-transform: rotate(32.4deg); transform: rotate(32.4deg);
}
.square:hover .tile:nth-child(9) { -webkit-transform: rotate(-380.7deg); transform: rotate(-380.7deg);
}
body:hover .tile:nth-child(9) { -webkit-transform: rotate(-32.4deg); transform: rotate(-32.4deg);
}
.tile:nth-child(10) { left: 67.63355757%; top: 74.27050983%; -webkit-transform: rotate(36deg); transform: rotate(36deg);
}
.square:hover .tile:nth-child(10) { -webkit-transform: rotate(-423deg); transform: rotate(-423deg);
}
body:hover .tile:nth-child(10) { -webkit-transform: rotate(-36deg); transform: rotate(-36deg);
}
.tile:nth-child(11) { left: 69.12271969%; top: 73.11539728%; -webkit-transform: rotate(39.6deg); transform: rotate(39.6deg);
}
.square:hover .tile:nth-child(11) { -webkit-transform: rotate(-465.3deg); transform: rotate(-465.3deg);
}
body:hover .tile:nth-child(11) { -webkit-transform: rotate(-39.6deg); transform: rotate(-39.6deg);
}
.tile:nth-child(12) { left: 70.53641318%; top: 71.86905882%; -webkit-transform: rotate(43.2deg); transform: rotate(43.2deg);
}
.square:hover .tile:nth-child(12) { -webkit-transform: rotate(-507.6deg); transform: rotate(-507.6deg);
}
body:hover .tile:nth-child(12) { -webkit-transform: rotate(-43.2deg); transform: rotate(-43.2deg);
}
.tile:nth-child(13) { left: 71.86905882%; top: 70.53641318%; -webkit-transform: rotate(46.8deg); transform: rotate(46.8deg);
}
.square:hover .tile:nth-child(13) { -webkit-transform: rotate(-549.9deg); transform: rotate(-549.9deg);
}
body:hover .tile:nth-child(13) { -webkit-transform: rotate(-46.8deg); transform: rotate(-46.8deg);
}
.tile:nth-child(14) { left: 73.11539728%; top: 69.12271969%; -webkit-transform: rotate(50.4deg); transform: rotate(50.4deg);
}
.square:hover .tile:nth-child(14) { -webkit-transform: rotate(-592.2deg); transform: rotate(-592.2deg);
}
body:hover .tile:nth-child(14) { -webkit-transform: rotate(-50.4deg); transform: rotate(-50.4deg);
}
.tile:nth-child(15) { left: 74.27050983%; top: 67.63355757%; -webkit-transform: rotate(54deg); transform: rotate(54deg);
}
.square:hover .tile:nth-child(15) { -webkit-transform: rotate(-634.5deg); transform: rotate(-634.5deg);
}
body:hover .tile:nth-child(15) { -webkit-transform: rotate(-54deg); transform: rotate(-54deg);
}
.tile:nth-child(16) { left: 75.32983777%; top: 66.07480385%; -webkit-transform: rotate(57.6deg); transform: rotate(57.6deg);
}
.square:hover .tile:nth-child(16) { -webkit-transform: rotate(-676.8deg); transform: rotate(-676.8deg);
}
body:hover .tile:nth-child(16) { -webkit-transform: rotate(-57.6deg); transform: rotate(-57.6deg);
}
.tile:nth-child(17) { left: 76.2892004%; top: 64.45261022%; -webkit-transform: rotate(61.2deg); transform: rotate(61.2deg);
}
.square:hover .tile:nth-child(17) { -webkit-transform: rotate(-719.1deg); transform: rotate(-719.1deg);
}
body:hover .tile:nth-child(17) { -webkit-transform: rotate(-61.2deg); transform: rotate(-61.2deg);
}
.tile:nth-child(18) { left: 77.14481157%; top: 62.77337875%; -webkit-transform: rotate(64.8deg); transform: rotate(64.8deg);
}
.square:hover .tile:nth-child(18) { -webkit-transform: rotate(-761.4deg); transform: rotate(-761.4deg);
}
body:hover .tile:nth-child(18) { -webkit-transform: rotate(-64.8deg); transform: rotate(-64.8deg);
}
.tile:nth-child(19) { left: 77.89329458%; top: 61.04373658%; -webkit-transform: rotate(68.4deg); transform: rotate(68.4deg);
}
.square:hover .tile:nth-child(19) { -webkit-transform: rotate(-803.7deg); transform: rotate(-803.7deg);
}
body:hover .tile:nth-child(19) { -webkit-transform: rotate(-68.4deg); transform: rotate(-68.4deg);
}
.tile:nth-child(20) { left: 78.53169549%; top: 59.27050983%; -webkit-transform: rotate(72deg); transform: rotate(72deg);
}
.square:hover .tile:nth-child(20) { -webkit-transform: rotate(-846deg); transform: rotate(-846deg);
}
body:hover .tile:nth-child(20) { -webkit-transform: rotate(-72deg); transform: rotate(-72deg);
}
.tile:nth-child(21) { left: 79.05749483%; top: 57.46069661%; -webkit-transform: rotate(75.6deg); transform: rotate(75.6deg);
}
.square:hover .tile:nth-child(21) { -webkit-transform: rotate(-888.3deg); transform: rotate(-888.3deg);
}
body:hover .tile:nth-child(21) { -webkit-transform: rotate(-75.6deg); transform: rotate(-75.6deg);
}
.tile:nth-child(22) { left: 79.46861752%; top: 55.62143944%; -webkit-transform: rotate(79.2deg); transform: rotate(79.2deg);
}
.square:hover .tile:nth-child(22) { -webkit-transform: rotate(-930.6deg); transform: rotate(-930.6deg);
}
body:hover .tile:nth-child(22) { -webkit-transform: rotate(-79.2deg); transform: rotate(-79.2deg);
}
.tile:nth-child(23) { left: 79.76344104%; top: 53.75999701%; -webkit-transform: rotate(82.8deg); transform: rotate(82.8deg);
}
.square:hover .tile:nth-child(23) { -webkit-transform: rotate(-972.9deg); transform: rotate(-972.9deg);
}
body:hover .tile:nth-child(23) { -webkit-transform: rotate(-82.8deg); transform: rotate(-82.8deg);
}
.tile:nth-child(24) { left: 79.94080185%; top: 51.88371559%; -webkit-transform: rotate(86.4deg); transform: rotate(86.4deg);
}
.square:hover .tile:nth-child(24) { -webkit-transform: rotate(-1015.2deg); transform: rotate(-1015.2deg);
}
body:hover .tile:nth-child(24) { -webkit-transform: rotate(-86.4deg); transform: rotate(-86.4deg);
}
.tile:nth-child(25) { left: 80%; top: 50%; -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.square:hover .tile:nth-child(25) { -webkit-transform: rotate(-1057.5deg); transform: rotate(-1057.5deg);
}
body:hover .tile:nth-child(25) { -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
.tile:nth-child(26) { left: 79.94080185%; top: 48.11628441%; -webkit-transform: rotate(93.6deg); transform: rotate(93.6deg);
}
.square:hover .tile:nth-child(26) { -webkit-transform: rotate(-1099.8deg); transform: rotate(-1099.8deg);
}
body:hover .tile:nth-child(26) { -webkit-transform: rotate(-93.6deg); transform: rotate(-93.6deg);
}
.tile:nth-child(27) { left: 79.76344104%; top: 46.24000299%; -webkit-transform: rotate(97.2deg); transform: rotate(97.2deg);
}
.square:hover .tile:nth-child(27) { -webkit-transform: rotate(-1142.1deg); transform: rotate(-1142.1deg);
}
body:hover .tile:nth-child(27) { -webkit-transform: rotate(-97.2deg); transform: rotate(-97.2deg);
}
.tile:nth-child(28) { left: 79.46861752%; top: 44.37856056%; -webkit-transform: rotate(100.8deg); transform: rotate(100.8deg);
}
.square:hover .tile:nth-child(28) { -webkit-transform: rotate(-1184.4deg); transform: rotate(-1184.4deg);
}
body:hover .tile:nth-child(28) { -webkit-transform: rotate(-100.8deg); transform: rotate(-100.8deg);
}
.tile:nth-child(29) { left: 79.05749483%; top: 42.53930339%; -webkit-transform: rotate(104.4deg); transform: rotate(104.4deg);
}
.square:hover .tile:nth-child(29) { -webkit-transform: rotate(-1226.7deg); transform: rotate(-1226.7deg);
}
body:hover .tile:nth-child(29) { -webkit-transform: rotate(-104.4deg); transform: rotate(-104.4deg);
}
.tile:nth-child(30) { left: 78.53169549%; top: 40.72949017%; -webkit-transform: rotate(108deg); transform: rotate(108deg);
}
.square:hover .tile:nth-child(30) { -webkit-transform: rotate(-1269deg); transform: rotate(-1269deg);
}
body:hover .tile:nth-child(30) { -webkit-transform: rotate(-108deg); transform: rotate(-108deg);
}
.tile:nth-child(31) { left: 77.89329458%; top: 38.95626342%; -webkit-transform: rotate(111.6deg); transform: rotate(111.6deg);
}
.square:hover .tile:nth-child(31) { -webkit-transform: rotate(-1311.3deg); transform: rotate(-1311.3deg);
}
body:hover .tile:nth-child(31) { -webkit-transform: rotate(-111.6deg); transform: rotate(-111.6deg);
}
.tile:nth-child(32) { left: 77.14481157%; top: 37.22662125%; -webkit-transform: rotate(115.2deg); transform: rotate(115.2deg);
}
.square:hover .tile:nth-child(32) { -webkit-transform: rotate(-1353.6deg); transform: rotate(-1353.6deg);
}
body:hover .tile:nth-child(32) { -webkit-transform: rotate(-115.2deg); transform: rotate(-115.2deg);
}
.tile:nth-child(33) { left: 76.2892004%; top: 35.54738978%; -webkit-transform: rotate(118.8deg); transform: rotate(118.8deg);
}
.square:hover .tile:nth-child(33) { -webkit-transform: rotate(-1395.9deg); transform: rotate(-1395.9deg);
}
body:hover .tile:nth-child(33) { -webkit-transform: rotate(-118.8deg); transform: rotate(-118.8deg);
}
.tile:nth-child(34) { left: 75.32983777%; top: 33.92519615%; -webkit-transform: rotate(122.4deg); transform: rotate(122.4deg);
}
.square:hover .tile:nth-child(34) { -webkit-transform: rotate(-1438.2deg); transform: rotate(-1438.2deg);
}
body:hover .tile:nth-child(34) { -webkit-transform: rotate(-122.4deg); transform: rotate(-122.4deg);
}
.tile:nth-child(35) { left: 74.27050983%; top: 32.36644243%; -webkit-transform: rotate(126deg); transform: rotate(126deg);
}
.square:hover .tile:nth-child(35) { -webkit-transform: rotate(-1480.5deg); transform: rotate(-1480.5deg);
}
body:hover .tile:nth-child(35) { -webkit-transform: rotate(-126deg); transform: rotate(-126deg);
}
.tile:nth-child(36) { left: 73.11539728%; top: 30.87728031%; -webkit-transform: rotate(129.6deg); transform: rotate(129.6deg);
}
.square:hover .tile:nth-child(36) { -webkit-transform: rotate(-1522.8deg); transform: rotate(-1522.8deg);
}
body:hover .tile:nth-child(36) { -webkit-transform: rotate(-129.6deg); transform: rotate(-129.6deg);
}
.tile:nth-child(37) { left: 71.86905882%; top: 29.46358682%; -webkit-transform: rotate(133.2deg); transform: rotate(133.2deg);
}
.square:hover .tile:nth-child(37) { -webkit-transform: rotate(-1565.1deg); transform: rotate(-1565.1deg);
}
body:hover .tile:nth-child(37) { -webkit-transform: rotate(-133.2deg); transform: rotate(-133.2deg);
}
.tile:nth-child(38) { left: 70.53641318%; top: 28.13094118%; -webkit-transform: rotate(136.8deg); transform: rotate(136.8deg);
}
.square:hover .tile:nth-child(38) { -webkit-transform: rotate(-1607.4deg); transform: rotate(-1607.4deg);
}
body:hover .tile:nth-child(38) { -webkit-transform: rotate(-136.8deg); transform: rotate(-136.8deg);
}
.tile:nth-child(39) { left: 69.12271969%; top: 26.88460272%; -webkit-transform: rotate(140.4deg); transform: rotate(140.4deg);
}
.square:hover .tile:nth-child(39) { -webkit-transform: rotate(-1649.7deg); transform: rotate(-1649.7deg);
}
body:hover .tile:nth-child(39) { -webkit-transform: rotate(-140.4deg); transform: rotate(-140.4deg);
}
.tile:nth-child(40) { left: 67.63355757%; top: 25.72949017%; -webkit-transform: rotate(144deg); transform: rotate(144deg);
}
.square:hover .tile:nth-child(40) { -webkit-transform: rotate(-1692deg); transform: rotate(-1692deg);
}
body:hover .tile:nth-child(40) { -webkit-transform: rotate(-144deg); transform: rotate(-144deg);
}
.tile:nth-child(41) { left: 66.07480385%; top: 24.67016223%; -webkit-transform: rotate(147.6deg); transform: rotate(147.6deg);
}
.square:hover .tile:nth-child(41) { -webkit-transform: rotate(-1734.3deg); transform: rotate(-1734.3deg);
}
body:hover .tile:nth-child(41) { -webkit-transform: rotate(-147.6deg); transform: rotate(-147.6deg);
}
.tile:nth-child(42) { left: 64.45261022%; top: 23.7107996%; -webkit-transform: rotate(151.2deg); transform: rotate(151.2deg);
}
.square:hover .tile:nth-child(42) { -webkit-transform: rotate(-1776.6deg); transform: rotate(-1776.6deg);
}
body:hover .tile:nth-child(42) { -webkit-transform: rotate(-151.2deg); transform: rotate(-151.2deg);
}
.tile:nth-child(43) { left: 62.77337875%; top: 22.85518843%; -webkit-transform: rotate(154.8deg); transform: rotate(154.8deg);
}
.square:hover .tile:nth-child(43) { -webkit-transform: rotate(-1818.9deg); transform: rotate(-1818.9deg);
}
body:hover .tile:nth-child(43) { -webkit-transform: rotate(-154.8deg); transform: rotate(-154.8deg);
}
.tile:nth-child(44) { left: 61.04373658%; top: 22.10670542%; -webkit-transform: rotate(158.4deg); transform: rotate(158.4deg);
}
.square:hover .tile:nth-child(44) { -webkit-transform: rotate(-1861.2deg); transform: rotate(-1861.2deg);
}
body:hover .tile:nth-child(44) { -webkit-transform: rotate(-158.4deg); transform: rotate(-158.4deg);
}
.tile:nth-child(45) { left: 59.27050983%; top: 21.46830451%; -webkit-transform: rotate(162deg); transform: rotate(162deg);
}
.square:hover .tile:nth-child(45) { -webkit-transform: rotate(-1903.5deg); transform: rotate(-1903.5deg);
}
body:hover .tile:nth-child(45) { -webkit-transform: rotate(-162deg); transform: rotate(-162deg);
}
.tile:nth-child(46) { left: 57.46069661%; top: 20.94250517%; -webkit-transform: rotate(165.6deg); transform: rotate(165.6deg);
}
.square:hover .tile:nth-child(46) { -webkit-transform: rotate(-1945.8deg); transform: rotate(-1945.8deg);
}
body:hover .tile:nth-child(46) { -webkit-transform: rotate(-165.6deg); transform: rotate(-165.6deg);
}
.tile:nth-child(47) { left: 55.62143944%; top: 20.53138248%; -webkit-transform: rotate(169.2deg); transform: rotate(169.2deg);
}
.square:hover .tile:nth-child(47) { -webkit-transform: rotate(-1988.1deg); transform: rotate(-1988.1deg);
}
body:hover .tile:nth-child(47) { -webkit-transform: rotate(-169.2deg); transform: rotate(-169.2deg);
}
.tile:nth-child(48) { left: 53.75999701%; top: 20.23655896%; -webkit-transform: rotate(172.8deg); transform: rotate(172.8deg);
}
.square:hover .tile:nth-child(48) { -webkit-transform: rotate(-2030.4deg); transform: rotate(-2030.4deg);
}
body:hover .tile:nth-child(48) { -webkit-transform: rotate(-172.8deg); transform: rotate(-172.8deg);
}
.tile:nth-child(49) { left: 51.88371559%; top: 20.05919815%; -webkit-transform: rotate(176.4deg); transform: rotate(176.4deg);
}
.square:hover .tile:nth-child(49) { -webkit-transform: rotate(-2072.7deg); transform: rotate(-2072.7deg);
}
body:hover .tile:nth-child(49) { -webkit-transform: rotate(-176.4deg); transform: rotate(-176.4deg);
}
.tile:nth-child(50) { left: 50%; top: 20%; -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.square:hover .tile:nth-child(50) { -webkit-transform: rotate(-2115deg); transform: rotate(-2115deg);
}
body:hover .tile:nth-child(50) { -webkit-transform: rotate(-180deg); transform: rotate(-180deg);
}
.tile:nth-child(51) { left: 48.11628441%; top: 20.05919815%; -webkit-transform: rotate(183.6deg); transform: rotate(183.6deg);
}
.square:hover .tile:nth-child(51) { -webkit-transform: rotate(-2157.3deg); transform: rotate(-2157.3deg);
}
body:hover .tile:nth-child(51) { -webkit-transform: rotate(-183.6deg); transform: rotate(-183.6deg);
}
.tile:nth-child(52) { left: 46.24000299%; top: 20.23655896%; -webkit-transform: rotate(187.2deg); transform: rotate(187.2deg);
}
.square:hover .tile:nth-child(52) { -webkit-transform: rotate(-2199.6deg); transform: rotate(-2199.6deg);
}
body:hover .tile:nth-child(52) { -webkit-transform: rotate(-187.2deg); transform: rotate(-187.2deg);
}
.tile:nth-child(53) { left: 44.37856056%; top: 20.53138248%; -webkit-transform: rotate(190.8deg); transform: rotate(190.8deg);
}
.square:hover .tile:nth-child(53) { -webkit-transform: rotate(-2241.9deg); transform: rotate(-2241.9deg);
}
body:hover .tile:nth-child(53) { -webkit-transform: rotate(-190.8deg); transform: rotate(-190.8deg);
}
.tile:nth-child(54) { left: 42.53930339%; top: 20.94250517%; -webkit-transform: rotate(194.4deg); transform: rotate(194.4deg);
}
.square:hover .tile:nth-child(54) { -webkit-transform: rotate(-2284.2deg); transform: rotate(-2284.2deg);
}
body:hover .tile:nth-child(54) { -webkit-transform: rotate(-194.4deg); transform: rotate(-194.4deg);
}
.tile:nth-child(55) { left: 40.72949017%; top: 21.46830451%; -webkit-transform: rotate(198deg); transform: rotate(198deg);
}
.square:hover .tile:nth-child(55) { -webkit-transform: rotate(-2326.5deg); transform: rotate(-2326.5deg);
}
body:hover .tile:nth-child(55) { -webkit-transform: rotate(-198deg); transform: rotate(-198deg);
}
.tile:nth-child(56) { left: 38.95626342%; top: 22.10670542%; -webkit-transform: rotate(201.6deg); transform: rotate(201.6deg);
}
.square:hover .tile:nth-child(56) { -webkit-transform: rotate(-2368.8deg); transform: rotate(-2368.8deg);
}
body:hover .tile:nth-child(56) { -webkit-transform: rotate(-201.6deg); transform: rotate(-201.6deg);
}
.tile:nth-child(57) { left: 37.22662125%; top: 22.85518843%; -webkit-transform: rotate(205.2deg); transform: rotate(205.2deg);
}
.square:hover .tile:nth-child(57) { -webkit-transform: rotate(-2411.1deg); transform: rotate(-2411.1deg);
}
body:hover .tile:nth-child(57) { -webkit-transform: rotate(-205.2deg); transform: rotate(-205.2deg);
}
.tile:nth-child(58) { left: 35.54738978%; top: 23.7107996%; -webkit-transform: rotate(208.8deg); transform: rotate(208.8deg);
}
.square:hover .tile:nth-child(58) { -webkit-transform: rotate(-2453.4deg); transform: rotate(-2453.4deg);
}
body:hover .tile:nth-child(58) { -webkit-transform: rotate(-208.8deg); transform: rotate(-208.8deg);
}
.tile:nth-child(59) { left: 33.92519615%; top: 24.67016223%; -webkit-transform: rotate(212.4deg); transform: rotate(212.4deg);
}
.square:hover .tile:nth-child(59) { -webkit-transform: rotate(-2495.7deg); transform: rotate(-2495.7deg);
}
body:hover .tile:nth-child(59) { -webkit-transform: rotate(-212.4deg); transform: rotate(-212.4deg);
}
.tile:nth-child(60) { left: 32.36644243%; top: 25.72949017%; -webkit-transform: rotate(216deg); transform: rotate(216deg);
}
.square:hover .tile:nth-child(60) { -webkit-transform: rotate(-2538deg); transform: rotate(-2538deg);
}
body:hover .tile:nth-child(60) { -webkit-transform: rotate(-216deg); transform: rotate(-216deg);
}
.tile:nth-child(61) { left: 30.87728031%; top: 26.88460272%; -webkit-transform: rotate(219.6deg); transform: rotate(219.6deg);
}
.square:hover .tile:nth-child(61) { -webkit-transform: rotate(-2580.3deg); transform: rotate(-2580.3deg);
}
body:hover .tile:nth-child(61) { -webkit-transform: rotate(-219.6deg); transform: rotate(-219.6deg);
}
.tile:nth-child(62) { left: 29.46358682%; top: 28.13094118%; -webkit-transform: rotate(223.2deg); transform: rotate(223.2deg);
}
.square:hover .tile:nth-child(62) { -webkit-transform: rotate(-2622.6deg); transform: rotate(-2622.6deg);
}
body:hover .tile:nth-child(62) { -webkit-transform: rotate(-223.2deg); transform: rotate(-223.2deg);
}
.tile:nth-child(63) { left: 28.13094118%; top: 29.46358682%; -webkit-transform: rotate(226.8deg); transform: rotate(226.8deg);
}
.square:hover .tile:nth-child(63) { -webkit-transform: rotate(-2664.9deg); transform: rotate(-2664.9deg);
}
body:hover .tile:nth-child(63) { -webkit-transform: rotate(-226.8deg); transform: rotate(-226.8deg);
}
.tile:nth-child(64) { left: 26.88460272%; top: 30.87728031%; -webkit-transform: rotate(230.4deg); transform: rotate(230.4deg);
}
.square:hover .tile:nth-child(64) { -webkit-transform: rotate(-2707.2deg); transform: rotate(-2707.2deg);
}
body:hover .tile:nth-child(64) { -webkit-transform: rotate(-230.4deg); transform: rotate(-230.4deg);
}
.tile:nth-child(65) { left: 25.72949017%; top: 32.36644243%; -webkit-transform: rotate(234deg); transform: rotate(234deg);
}
.square:hover .tile:nth-child(65) { -webkit-transform: rotate(-2749.5deg); transform: rotate(-2749.5deg);
}
body:hover .tile:nth-child(65) { -webkit-transform: rotate(-234deg); transform: rotate(-234deg);
}
.tile:nth-child(66) { left: 24.67016223%; top: 33.92519615%; -webkit-transform: rotate(237.6deg); transform: rotate(237.6deg);
}
.square:hover .tile:nth-child(66) { -webkit-transform: rotate(-2791.8deg); transform: rotate(-2791.8deg);
}
body:hover .tile:nth-child(66) { -webkit-transform: rotate(-237.6deg); transform: rotate(-237.6deg);
}
.tile:nth-child(67) { left: 23.7107996%; top: 35.54738978%; -webkit-transform: rotate(241.2deg); transform: rotate(241.2deg);
}
.square:hover .tile:nth-child(67) { -webkit-transform: rotate(-2834.1deg); transform: rotate(-2834.1deg);
}
body:hover .tile:nth-child(67) { -webkit-transform: rotate(-241.2deg); transform: rotate(-241.2deg);
}
.tile:nth-child(68) { left: 22.85518843%; top: 37.22662125%; -webkit-transform: rotate(244.8deg); transform: rotate(244.8deg);
}
.square:hover .tile:nth-child(68) { -webkit-transform: rotate(-2876.4deg); transform: rotate(-2876.4deg);
}
body:hover .tile:nth-child(68) { -webkit-transform: rotate(-244.8deg); transform: rotate(-244.8deg);
}
.tile:nth-child(69) { left: 22.10670542%; top: 38.95626342%; -webkit-transform: rotate(248.4deg); transform: rotate(248.4deg);
}
.square:hover .tile:nth-child(69) { -webkit-transform: rotate(-2918.7deg); transform: rotate(-2918.7deg);
}
body:hover .tile:nth-child(69) { -webkit-transform: rotate(-248.4deg); transform: rotate(-248.4deg);
}
.tile:nth-child(70) { left: 21.46830451%; top: 40.72949017%; -webkit-transform: rotate(252deg); transform: rotate(252deg);
}
.square:hover .tile:nth-child(70) { -webkit-transform: rotate(-2961deg); transform: rotate(-2961deg);
}
body:hover .tile:nth-child(70) { -webkit-transform: rotate(-252deg); transform: rotate(-252deg);
}
.tile:nth-child(71) { left: 20.94250517%; top: 42.53930339%; -webkit-transform: rotate(255.6deg); transform: rotate(255.6deg);
}
.square:hover .tile:nth-child(71) { -webkit-transform: rotate(-3003.3deg); transform: rotate(-3003.3deg);
}
body:hover .tile:nth-child(71) { -webkit-transform: rotate(-255.6deg); transform: rotate(-255.6deg);
}
.tile:nth-child(72) { left: 20.53138248%; top: 44.37856056%; -webkit-transform: rotate(259.2deg); transform: rotate(259.2deg);
}
.square:hover .tile:nth-child(72) { -webkit-transform: rotate(-3045.6deg); transform: rotate(-3045.6deg);
}
body:hover .tile:nth-child(72) { -webkit-transform: rotate(-259.2deg); transform: rotate(-259.2deg);
}
.tile:nth-child(73) { left: 20.23655896%; top: 46.24000299%; -webkit-transform: rotate(262.8deg); transform: rotate(262.8deg);
}
.square:hover .tile:nth-child(73) { -webkit-transform: rotate(-3087.9deg); transform: rotate(-3087.9deg);
}
body:hover .tile:nth-child(73) { -webkit-transform: rotate(-262.8deg); transform: rotate(-262.8deg);
}
.tile:nth-child(74) { left: 20.05919815%; top: 48.11628441%; -webkit-transform: rotate(266.4deg); transform: rotate(266.4deg);
}
.square:hover .tile:nth-child(74) { -webkit-transform: rotate(-3130.2deg); transform: rotate(-3130.2deg);
}
body:hover .tile:nth-child(74) { -webkit-transform: rotate(-266.4deg); transform: rotate(-266.4deg);
}
.tile:nth-child(75) { left: 20%; top: 50%; -webkit-transform: rotate(270deg); transform: rotate(270deg);
}
.square:hover .tile:nth-child(75) { -webkit-transform: rotate(-3172.5deg); transform: rotate(-3172.5deg);
}
body:hover .tile:nth-child(75) { -webkit-transform: rotate(-270deg); transform: rotate(-270deg);
}
.tile:nth-child(76) { left: 20.05919815%; top: 51.88371559%; -webkit-transform: rotate(273.6deg); transform: rotate(273.6deg);
}
.square:hover .tile:nth-child(76) { -webkit-transform: rotate(-3214.8deg); transform: rotate(-3214.8deg);
}
body:hover .tile:nth-child(76) { -webkit-transform: rotate(-273.6deg); transform: rotate(-273.6deg);
}
.tile:nth-child(77) { left: 20.23655896%; top: 53.75999701%; -webkit-transform: rotate(277.2deg); transform: rotate(277.2deg);
}
.square:hover .tile:nth-child(77) { -webkit-transform: rotate(-3257.1deg); transform: rotate(-3257.1deg);
}
body:hover .tile:nth-child(77) { -webkit-transform: rotate(-277.2deg); transform: rotate(-277.2deg);
}
.tile:nth-child(78) { left: 20.53138248%; top: 55.62143944%; -webkit-transform: rotate(280.8deg); transform: rotate(280.8deg);
}
.square:hover .tile:nth-child(78) { -webkit-transform: rotate(-3299.4deg); transform: rotate(-3299.4deg);
}
body:hover .tile:nth-child(78) { -webkit-transform: rotate(-280.8deg); transform: rotate(-280.8deg);
}
.tile:nth-child(79) { left: 20.94250517%; top: 57.46069661%; -webkit-transform: rotate(284.4deg); transform: rotate(284.4deg);
}
.square:hover .tile:nth-child(79) { -webkit-transform: rotate(-3341.7deg); transform: rotate(-3341.7deg);
}
body:hover .tile:nth-child(79) { -webkit-transform: rotate(-284.4deg); transform: rotate(-284.4deg);
}
.tile:nth-child(80) { left: 21.46830451%; top: 59.27050983%; -webkit-transform: rotate(288deg); transform: rotate(288deg);
}
.square:hover .tile:nth-child(80) { -webkit-transform: rotate(-3384deg); transform: rotate(-3384deg);
}
body:hover .tile:nth-child(80) { -webkit-transform: rotate(-288deg); transform: rotate(-288deg);
}
.tile:nth-child(81) { left: 22.10670542%; top: 61.04373658%; -webkit-transform: rotate(291.6deg); transform: rotate(291.6deg);
}
.square:hover .tile:nth-child(81) { -webkit-transform: rotate(-3426.3deg); transform: rotate(-3426.3deg);
}
body:hover .tile:nth-child(81) { -webkit-transform: rotate(-291.6deg); transform: rotate(-291.6deg);
}
.tile:nth-child(82) { left: 22.85518843%; top: 62.77337875%; -webkit-transform: rotate(295.2deg); transform: rotate(295.2deg);
}
.square:hover .tile:nth-child(82) { -webkit-transform: rotate(-3468.6deg); transform: rotate(-3468.6deg);
}
body:hover .tile:nth-child(82) { -webkit-transform: rotate(-295.2deg); transform: rotate(-295.2deg);
}
.tile:nth-child(83) { left: 23.7107996%; top: 64.45261022%; -webkit-transform: rotate(298.8deg); transform: rotate(298.8deg);
}
.square:hover .tile:nth-child(83) { -webkit-transform: rotate(-3510.9deg); transform: rotate(-3510.9deg);
}
body:hover .tile:nth-child(83) { -webkit-transform: rotate(-298.8deg); transform: rotate(-298.8deg);
}
.tile:nth-child(84) { left: 24.67016223%; top: 66.07480385%; -webkit-transform: rotate(302.4deg); transform: rotate(302.4deg);
}
.square:hover .tile:nth-child(84) { -webkit-transform: rotate(-3553.2deg); transform: rotate(-3553.2deg);
}
body:hover .tile:nth-child(84) { -webkit-transform: rotate(-302.4deg); transform: rotate(-302.4deg);
}
.tile:nth-child(85) { left: 25.72949017%; top: 67.63355757%; -webkit-transform: rotate(306deg); transform: rotate(306deg);
}
.square:hover .tile:nth-child(85) { -webkit-transform: rotate(-3595.5deg); transform: rotate(-3595.5deg);
}
body:hover .tile:nth-child(85) { -webkit-transform: rotate(-306deg); transform: rotate(-306deg);
}
.tile:nth-child(86) { left: 26.88460272%; top: 69.12271969%; -webkit-transform: rotate(309.6deg); transform: rotate(309.6deg);
}
.square:hover .tile:nth-child(86) { -webkit-transform: rotate(-3637.8deg); transform: rotate(-3637.8deg);
}
body:hover .tile:nth-child(86) { -webkit-transform: rotate(-309.6deg); transform: rotate(-309.6deg);
}
.tile:nth-child(87) { left: 28.13094118%; top: 70.53641318%; -webkit-transform: rotate(313.2deg); transform: rotate(313.2deg);
}
.square:hover .tile:nth-child(87) { -webkit-transform: rotate(-3680.1deg); transform: rotate(-3680.1deg);
}
body:hover .tile:nth-child(87) { -webkit-transform: rotate(-313.2deg); transform: rotate(-313.2deg);
}
.tile:nth-child(88) { left: 29.46358682%; top: 71.86905882%; -webkit-transform: rotate(316.8deg); transform: rotate(316.8deg);
}
.square:hover .tile:nth-child(88) { -webkit-transform: rotate(-3722.4deg); transform: rotate(-3722.4deg);
}
body:hover .tile:nth-child(88) { -webkit-transform: rotate(-316.8deg); transform: rotate(-316.8deg);
}
.tile:nth-child(89) { left: 30.87728031%; top: 73.11539728%; -webkit-transform: rotate(320.4deg); transform: rotate(320.4deg);
}
.square:hover .tile:nth-child(89) { -webkit-transform: rotate(-3764.7deg); transform: rotate(-3764.7deg);
}
body:hover .tile:nth-child(89) { -webkit-transform: rotate(-320.4deg); transform: rotate(-320.4deg);
}
.tile:nth-child(90) { left: 32.36644243%; top: 74.27050983%; -webkit-transform: rotate(324deg); transform: rotate(324deg);
}
.square:hover .tile:nth-child(90) { -webkit-transform: rotate(-3807deg); transform: rotate(-3807deg);
}
body:hover .tile:nth-child(90) { -webkit-transform: rotate(-324deg); transform: rotate(-324deg);
}
.tile:nth-child(91) { left: 33.92519615%; top: 75.32983777%; -webkit-transform: rotate(327.6deg); transform: rotate(327.6deg);
}
.square:hover .tile:nth-child(91) { -webkit-transform: rotate(-3849.3deg); transform: rotate(-3849.3deg);
}
body:hover .tile:nth-child(91) { -webkit-transform: rotate(-327.6deg); transform: rotate(-327.6deg);
}
.tile:nth-child(92) { left: 35.54738978%; top: 76.2892004%; -webkit-transform: rotate(331.2deg); transform: rotate(331.2deg);
}
.square:hover .tile:nth-child(92) { -webkit-transform: rotate(-3891.6deg); transform: rotate(-3891.6deg);
}
body:hover .tile:nth-child(92) { -webkit-transform: rotate(-331.2deg); transform: rotate(-331.2deg);
}
.tile:nth-child(93) { left: 37.22662125%; top: 77.14481157%; -webkit-transform: rotate(334.8deg); transform: rotate(334.8deg);
}
.square:hover .tile:nth-child(93) { -webkit-transform: rotate(-3933.9deg); transform: rotate(-3933.9deg);
}
body:hover .tile:nth-child(93) { -webkit-transform: rotate(-334.8deg); transform: rotate(-334.8deg);
}
.tile:nth-child(94) { left: 38.95626342%; top: 77.89329458%; -webkit-transform: rotate(338.4deg); transform: rotate(338.4deg);
}
.square:hover .tile:nth-child(94) { -webkit-transform: rotate(-3976.2deg); transform: rotate(-3976.2deg);
}
body:hover .tile:nth-child(94) { -webkit-transform: rotate(-338.4deg); transform: rotate(-338.4deg);
}
.tile:nth-child(95) { left: 40.72949017%; top: 78.53169549%; -webkit-transform: rotate(342deg); transform: rotate(342deg);
}
.square:hover .tile:nth-child(95) { -webkit-transform: rotate(-4018.5deg); transform: rotate(-4018.5deg);
}
body:hover .tile:nth-child(95) { -webkit-transform: rotate(-342deg); transform: rotate(-342deg);
}
.tile:nth-child(96) { left: 42.53930339%; top: 79.05749483%; -webkit-transform: rotate(345.6deg); transform: rotate(345.6deg);
}
.square:hover .tile:nth-child(96) { -webkit-transform: rotate(-4060.8deg); transform: rotate(-4060.8deg);
}
body:hover .tile:nth-child(96) { -webkit-transform: rotate(-345.6deg); transform: rotate(-345.6deg);
}
.tile:nth-child(97) { left: 44.37856056%; top: 79.46861752%; -webkit-transform: rotate(349.2deg); transform: rotate(349.2deg);
}
.square:hover .tile:nth-child(97) { -webkit-transform: rotate(-4103.1deg); transform: rotate(-4103.1deg);
}
body:hover .tile:nth-child(97) { -webkit-transform: rotate(-349.2deg); transform: rotate(-349.2deg);
}
.tile:nth-child(98) { left: 46.24000299%; top: 79.76344104%; -webkit-transform: rotate(352.8deg); transform: rotate(352.8deg);
}
.square:hover .tile:nth-child(98) { -webkit-transform: rotate(-4145.4deg); transform: rotate(-4145.4deg);
}
body:hover .tile:nth-child(98) { -webkit-transform: rotate(-352.8deg); transform: rotate(-352.8deg);
}
.tile:nth-child(99) { left: 48.11628441%; top: 79.94080185%; -webkit-transform: rotate(356.4deg); transform: rotate(356.4deg);
}
.square:hover .tile:nth-child(99) { -webkit-transform: rotate(-4187.7deg); transform: rotate(-4187.7deg);
}
body:hover .tile:nth-child(99) { -webkit-transform: rotate(-356.4deg); transform: rotate(-356.4deg);
}
.tile:nth-child(100) { left: 50%; top: 80%; -webkit-transform: rotate(360deg); transform: rotate(360deg);
}
.square:hover .tile:nth-child(100) { -webkit-transform: rotate(-4230deg); transform: rotate(-4230deg);
}
body:hover .tile:nth-child(100) { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);
}
Individual Element rotation - Script Codes
Individual Element rotation - Script Codes
Home Page Home
Developer Luuk Lamers
Username xaddict
Uploaded January 22, 2023
Rating 4
Size 6,597 Kb
Views 6,072
Do you need developer help for Individual Element rotation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luuk Lamers (xaddict) Script Codes
Name
Responsive off-canvas dual-side navigation without transforms
Fibonacci rotating spiral
CSS3 Spinners
CSS Hex Color Clock
Word count percentage
Continuum
Big Chat
Random Astroids
CSS 3D Card Deck
Flexbox layout sidebars and content
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!