Cellular Image Rotation on Hover

Wave
Wavy
Text
Effect
Moving
Move
Automatic
Scrollbar
Textbox
Wind
Twinkle
Dropdown
List
Browser
Explorer
Histry
Back
Top
Title
Checkbox
Check
Uncheck
All
Written by @kerixa 16 May 2020
Do you have a special thing for the users which should not appear suddenly. Then brick its image to small cells and rotate each of them. When the mouse hovers it, it will rotate and the original image will appear. The vision would return back to its original unclear scene, when the mouse leaves!
Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  height: 100vh;
  display: grid;
  place-content: center;
}
.frame {
  width: 60vmin;
  height: 80vmin;
  background: pink;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(12, 1fr);
}
.frame .cell {
  width: calc(100% + 0.5px);
  height: calc(100% + 0.5px);
  background-image: var(--img);
  background-size: 900% 1200%;
}
.frame .cell:nth-of-type(1) {
  background-position: 0% 0%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.20721464s;
  transition: all 1.20721464s;
}
.frame .cell:nth-of-type(2) {
  background-position: -100% 0%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.13979211s;
  transition: all 1.13979211s;
}
.frame .cell:nth-of-type(3) {
  background-position: -200% 0%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.53464006s;
  transition: all 1.53464006s;
}
.frame .cell:nth-of-type(4) {
  background-position: -300% 0%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.33972434s;
  transition: all 1.33972434s;
}
.frame .cell:nth-of-type(5) {
  background-position: -400% 0%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.51591856s;
  transition: all 1.51591856s;
}
.frame .cell:nth-of-type(6) {
  background-position: -500% 0%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.05215036s;
  transition: all 1.05215036s;
}
.frame .cell:nth-of-type(7) {
  background-position: -600% 0%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.26045352s;
  transition: all 1.26045352s;
}
.frame .cell:nth-of-type(8) {
  background-position: -700% 0%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.48231469s;
  transition: all 1.48231469s;
}
.frame .cell:nth-of-type(9) {
  background-position: -800% 0%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.23772521s;
  transition: all 1.23772521s;
}
.frame .cell:nth-of-type(10) {
  background-position: 0% -100%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.21163825s;
  transition: all 1.21163825s;
}
.frame .cell:nth-of-type(11) {
  background-position: -100% -100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.55853314s;
  transition: all 1.55853314s;
}
.frame .cell:nth-of-type(12) {
  background-position: -200% -100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.22873416s;
  transition: all 1.22873416s;
}
.frame .cell:nth-of-type(13) {
  background-position: -300% -100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.52757897s;
  transition: all 1.52757897s;
}
.frame .cell:nth-of-type(14) {
  background-position: -400% -100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.82842912s;
  transition: all 1.82842912s;
}
.frame .cell:nth-of-type(15) {
  background-position: -500% -100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.51522808s;
  transition: all 1.51522808s;
}
.frame .cell:nth-of-type(16) {
  background-position: -600% -100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.09513965s;
  transition: all 1.09513965s;
}
.frame .cell:nth-of-type(17) {
  background-position: -700% -100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.96297528s;
  transition: all 1.96297528s;
}
.frame .cell:nth-of-type(18) {
  background-position: -800% -100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.13614758s;
  transition: all 1.13614758s;
}
.frame .cell:nth-of-type(19) {
  background-position: 0% -200%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.42170315s;
  transition: all 1.42170315s;
}
.frame .cell:nth-of-type(20) {
  background-position: -100% -200%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.57118424s;
  transition: all 1.57118424s;
}
.frame .cell:nth-of-type(21) {
  background-position: -200% -200%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.60892957s;
  transition: all 1.60892957s;
}
.frame .cell:nth-of-type(22) {
  background-position: -300% -200%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.57528421s;
  transition: all 1.57528421s;
}
.frame .cell:nth-of-type(23) {
  background-position: -400% -200%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.4532247s;
  transition: all 1.4532247s;
}
.frame .cell:nth-of-type(24) {
  background-position: -500% -200%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.67229621s;
  transition: all 1.67229621s;
}
.frame .cell:nth-of-type(25) {
  background-position: -600% -200%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.2153278s;
  transition: all 1.2153278s;
}
.frame .cell:nth-of-type(26) {
  background-position: -700% -200%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.73104684s;
  transition: all 1.73104684s;
}
.frame .cell:nth-of-type(27) {
  background-position: -800% -200%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.07645859s;
  transition: all 1.07645859s;
}
.frame .cell:nth-of-type(28) {
  background-position: 0% -300%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.37013231s;
  transition: all 1.37013231s;
}
.frame .cell:nth-of-type(29) {
  background-position: -100% -300%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.16711823s;
  transition: all 1.16711823s;
}
.frame .cell:nth-of-type(30) {
  background-position: -200% -300%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.85476386s;
  transition: all 1.85476386s;
}
.frame .cell:nth-of-type(31) {
  background-position: -300% -300%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.29946421s;
  transition: all 1.29946421s;
}
.frame .cell:nth-of-type(32) {
  background-position: -400% -300%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.3142363s;
  transition: all 1.3142363s;
}
.frame .cell:nth-of-type(33) {
  background-position: -500% -300%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.01685628s;
  transition: all 1.01685628s;
}
.frame .cell:nth-of-type(34) {
  background-position: -600% -300%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.68023384s;
  transition: all 1.68023384s;
}
.frame .cell:nth-of-type(35) {
  background-position: -700% -300%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.49435269s;
  transition: all 1.49435269s;
}
.frame .cell:nth-of-type(36) {
  background-position: -800% -300%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.76003945s;
  transition: all 1.76003945s;
}
.frame .cell:nth-of-type(37) {
  background-position: 0% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.07558235s;
  transition: all 1.07558235s;
}
.frame .cell:nth-of-type(38) {
  background-position: -100% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.20038325s;
  transition: all 1.20038325s;
}
.frame .cell:nth-of-type(39) {
  background-position: -200% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.08889104s;
  transition: all 1.08889104s;
}
.frame .cell:nth-of-type(40) {
  background-position: -300% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.19363285s;
  transition: all 1.19363285s;
}
.frame .cell:nth-of-type(41) {
  background-position: -400% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.57543134s;
  transition: all 1.57543134s;
}
.frame .cell:nth-of-type(42) {
  background-position: -500% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.81327044s;
  transition: all 1.81327044s;
}
.frame .cell:nth-of-type(43) {
  background-position: -600% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.25135692s;
  transition: all 1.25135692s;
}
.frame .cell:nth-of-type(44) {
  background-position: -700% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.61447183s;
  transition: all 1.61447183s;
}
.frame .cell:nth-of-type(45) {
  background-position: -800% -400%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.74941558s;
  transition: all 1.74941558s;
}
.frame .cell:nth-of-type(46) {
  background-position: 0% -500%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.69535228s;
  transition: all 1.69535228s;
}
.frame .cell:nth-of-type(47) {
  background-position: -100% -500%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.95096099s;
  transition: all 1.95096099s;
}
.frame .cell:nth-of-type(48) {
  background-position: -200% -500%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.9819375s;
  transition: all 1.9819375s;
}
.frame .cell:nth-of-type(49) {
  background-position: -300% -500%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.49388307s;
  transition: all 1.49388307s;
}
.frame .cell:nth-of-type(50) {
  background-position: -400% -500%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.17852988s;
  transition: all 1.17852988s;
}
.frame .cell:nth-of-type(51) {
  background-position: -500% -500%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.10144814s;
  transition: all 1.10144814s;
}
.frame .cell:nth-of-type(52) {
  background-position: -600% -500%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.07321358s;
  transition: all 1.07321358s;
}
.frame .cell:nth-of-type(53) {
  background-position: -700% -500%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.36580378s;
  transition: all 1.36580378s;
}
.frame .cell:nth-of-type(54) {
  background-position: -800% -500%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.8380721s;
  transition: all 1.8380721s;
}
.frame .cell:nth-of-type(55) {
  background-position: 0% -600%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.48763492s;
  transition: all 1.48763492s;
}
.frame .cell:nth-of-type(56) {
  background-position: -100% -600%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.93918096s;
  transition: all 1.93918096s;
}
.frame .cell:nth-of-type(57) {
  background-position: -200% -600%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.39118956s;
  transition: all 1.39118956s;
}
.frame .cell:nth-of-type(58) {
  background-position: -300% -600%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.06424271s;
  transition: all 1.06424271s;
}
.frame .cell:nth-of-type(59) {
  background-position: -400% -600%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.71768111s;
  transition: all 1.71768111s;
}
.frame .cell:nth-of-type(60) {
  background-position: -500% -600%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.30058104s;
  transition: all 1.30058104s;
}
.frame .cell:nth-of-type(61) {
  background-position: -600% -600%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.47523979s;
  transition: all 1.47523979s;
}
.frame .cell:nth-of-type(62) {
  background-position: -700% -600%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.49872848s;
  transition: all 1.49872848s;
}
.frame .cell:nth-of-type(63) {
  background-position: -800% -600%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.98424019s;
  transition: all 1.98424019s;
}
.frame .cell:nth-of-type(64) {
  background-position: 0% -700%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.99547062s;
  transition: all 1.99547062s;
}
.frame .cell:nth-of-type(65) {
  background-position: -100% -700%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.66178011s;
  transition: all 1.66178011s;
}
.frame .cell:nth-of-type(66) {
  background-position: -200% -700%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.38907975s;
  transition: all 1.38907975s;
}
.frame .cell:nth-of-type(67) {
  background-position: -300% -700%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.33638683s;
  transition: all 1.33638683s;
}
.frame .cell:nth-of-type(68) {
  background-position: -400% -700%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.16579235s;
  transition: all 1.16579235s;
}
.frame .cell:nth-of-type(69) {
  background-position: -500% -700%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.94983053s;
  transition: all 1.94983053s;
}
.frame .cell:nth-of-type(70) {
  background-position: -600% -700%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.72513808s;
  transition: all 1.72513808s;
}
.frame .cell:nth-of-type(71) {
  background-position: -700% -700%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.82576142s;
  transition: all 1.82576142s;
}
.frame .cell:nth-of-type(72) {
  background-position: -800% -700%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.23050591s;
  transition: all 1.23050591s;
}
.frame .cell:nth-of-type(73) {
  background-position: 0% -800%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.30365176s;
  transition: all 1.30365176s;
}
.frame .cell:nth-of-type(74) {
  background-position: -100% -800%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.22866557s;
  transition: all 1.22866557s;
}
.frame .cell:nth-of-type(75) {
  background-position: -200% -800%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.47398227s;
  transition: all 1.47398227s;
}
.frame .cell:nth-of-type(76) {
  background-position: -300% -800%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.79500911s;
  transition: all 1.79500911s;
}
.frame .cell:nth-of-type(77) {
  background-position: -400% -800%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.88948018s;
  transition: all 1.88948018s;
}
.frame .cell:nth-of-type(78) {
  background-position: -500% -800%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.03161203s;
  transition: all 1.03161203s;
}
.frame .cell:nth-of-type(79) {
  background-position: -600% -800%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.68844903s;
  transition: all 1.68844903s;
}
.frame .cell:nth-of-type(80) {
  background-position: -700% -800%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.37398062s;
  transition: all 1.37398062s;
}
.frame .cell:nth-of-type(81) {
  background-position: -800% -800%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.4727875s;
  transition: all 1.4727875s;
}
.frame .cell:nth-of-type(82) {
  background-position: 0% -900%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.78850178s;
  transition: all 1.78850178s;
}
.frame .cell:nth-of-type(83) {
  background-position: -100% -900%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.20195212s;
  transition: all 1.20195212s;
}
.frame .cell:nth-of-type(84) {
  background-position: -200% -900%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.33215292s;
  transition: all 1.33215292s;
}
.frame .cell:nth-of-type(85) {
  background-position: -300% -900%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.46908246s;
  transition: all 1.46908246s;
}
.frame .cell:nth-of-type(86) {
  background-position: -400% -900%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.48320066s;
  transition: all 1.48320066s;
}
.frame .cell:nth-of-type(87) {
  background-position: -500% -900%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.53728503s;
  transition: all 1.53728503s;
}
.frame .cell:nth-of-type(88) {
  background-position: -600% -900%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.86512007s;
  transition: all 1.86512007s;
}
.frame .cell:nth-of-type(89) {
  background-position: -700% -900%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.25947261s;
  transition: all 1.25947261s;
}
.frame .cell:nth-of-type(90) {
  background-position: -800% -900%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.95516017s;
  transition: all 1.95516017s;
}
.frame .cell:nth-of-type(91) {
  background-position: 0% -1000%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.45454105s;
  transition: all 1.45454105s;
}
.frame .cell:nth-of-type(92) {
  background-position: -100% -1000%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.02332074s;
  transition: all 1.02332074s;
}
.frame .cell:nth-of-type(93) {
  background-position: -200% -1000%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.06432631s;
  transition: all 1.06432631s;
}
.frame .cell:nth-of-type(94) {
  background-position: -300% -1000%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.84091808s;
  transition: all 1.84091808s;
}
.frame .cell:nth-of-type(95) {
  background-position: -400% -1000%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.43251479s;
  transition: all 1.43251479s;
}
.frame .cell:nth-of-type(96) {
  background-position: -500% -1000%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.24238263s;
  transition: all 1.24238263s;
}
.frame .cell:nth-of-type(97) {
  background-position: -600% -1000%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.91099076s;
  transition: all 1.91099076s;
}
.frame .cell:nth-of-type(98) {
  background-position: -700% -1000%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.47476082s;
  transition: all 1.47476082s;
}
.frame .cell:nth-of-type(99) {
  background-position: -800% -1000%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.6209211s;
  transition: all 1.6209211s;
}
.frame .cell:nth-of-type(100) {
  background-position: 0% -1100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.68658785s;
  transition: all 1.68658785s;
}
.frame .cell:nth-of-type(101) {
  background-position: -100% -1100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.60242901s;
  transition: all 1.60242901s;
}
.frame .cell:nth-of-type(102) {
  background-position: -200% -1100%;
  -webkit-transform: rotate(0.75turn);
          transform: rotate(0.75turn);
  -webkit-transition: all 1.47691167s;
  transition: all 1.47691167s;
}
.frame .cell:nth-of-type(103) {
  background-position: -300% -1100%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.16187737s;
  transition: all 1.16187737s;
}
.frame .cell:nth-of-type(104) {
  background-position: -400% -1100%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.47715802s;
  transition: all 1.47715802s;
}
.frame .cell:nth-of-type(105) {
  background-position: -500% -1100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.25723491s;
  transition: all 1.25723491s;
}
.frame .cell:nth-of-type(106) {
  background-position: -600% -1100%;
  -webkit-transform: rotate(-0.25turn);
          transform: rotate(-0.25turn);
  -webkit-transition: all 1.40617072s;
  transition: all 1.40617072s;
}
.frame .cell:nth-of-type(107) {
  background-position: -700% -1100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.93812832s;
  transition: all 1.93812832s;
}
.frame .cell:nth-of-type(108) {
  background-position: -800% -1100%;
  -webkit-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
  -webkit-transition: all 1.76653918s;
  transition: all 1.76653918s;
}
.frame:hover .cell {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
</style>

<a class="frame" style="--img:url(https://www.javascriptfreecode.com/files/20-2.jpg)" href="#"s>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div></a><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!
Comments

Here you can leave us commments. Let us know what you think about this code tutorial!
0 / 300