HTML CSS Image split 3d hover effect
CSS is making images split into 4 items with background size and position.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"></head><body> <div> <span></span><span></span><span></span><span></span> </div></body></html>and
CSS
*{ box-sizing: border-box;}body{ margin: 0; display: grid; place-items: center; height: 100vh;}.image_3d{ perspective: 1000px; width: 960px; height: 640px; box-shadow: 3px 5px 25px 8px rgba(0, 0, 0, 0.2);}.image_3d span{ display: block; height: 160px; transition: 1s; transform: rotateY(0deg);}.image_3d:hover span{ transform: rotateY(360deg);}.image_3d span:nth-child(1){ background: url('./child-5582985_960_720.png') 0px 0px/cover no-repeat; transition-delay: 0s;}.image_3d span:nth-child(2){ background: url('./child-5582985_960_720.png') 0px -160px/cover no-repeat; transition-delay: .1s;}.image_3d span:nth-child(3){ background: url('./child-5582985_960_720.png') 0px calc(-160px * 2)/cover no-repeat; transition-delay: .2s;}.image_3d span:nth-child(4){ background: url('./child-5582985_960_720.png') 0px calc(-160px * 3)/cover no-repeat; transition-delay: .3s;}this is actually tricky to make image splitting.
You can see image properties size it haswidth: 960px;
height: 640px;
so here is the trick.
Just making span tags we can split by doing their background-position and background-size.
If you like this tutorial, don't forget to share your thoughts.
Bye.
Top comments(1)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
