Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Account Created!

Please check your email for instructions to activate your account.

Wave
Wavy
Text
Effect
Moving
Move
Automatic
Scrollbar
Textbox
Wind
Twinkle
Dropdown
List
Browser
Explorer
Histry
Back
Top
Title
Checkbox
Check
Uncheck
All
Hello
Categories
Wave
Wavy
Text
Effect
Moving
Move
Automatic
Scrollbar
Textbox
Wind
Twinkle
Dropdown
List
Browser
Explorer
Histry
Back
Top
Title
Checkbox
Check
Uncheck
Popular Sites
Html Free Codes
Html5 Free Codes
Html Best Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter
Youtube
Instagram
Support
Contact Us
About JavaScript Best Codes
Not a member? Sign Up

Cellular Image Rotation on Hover

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!

K

Comments

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

0 / 300
TRENDING POST
1
Side Navigation with Fullscreen Menu
2
Side Navigation with Push Effect
3
Side Navigation with Overlay Effect
4
Parallax Background
5
Sliding Cards
VISITORS
Online Users: 12
Recent Members: admin_js, bloxio, yqaice, flooketsu, phuang_test
advertisement 2