Fun stuff with transforms, transitions and border radius

Developer
Andreas Neeven
Size
2,865 Kb
Views
36,432
  1. Fun stuff with transforms, transitions and border radius Previews
  2. Fun stuff with transforms, transitions and border radius HTML Codes
  3. Fun stuff with transforms, transitions and border radius CSS Codes
  4. Fun stuff with transforms, transitions and border radius JS Codes

How do I make an fun stuff with transforms, transitions and border radius?

Had a little fun trying different stuff with transforms, transitions and border radiuses.. What is a fun stuff with transforms, transitions and border radius? How do you make a fun stuff with transforms, transitions and border radius? This script and codes were developed by Andreas Neeven on 18 September 2022, Sunday.

Fun stuff with transforms, transitions and border radius Previews
IQ Test

Fun stuff with transforms, transitions and border radius - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fun stuff with transforms, transitions and border radius</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="item item-1"><div class="corner corner-1"></div></div>	<div class="item item-2"><div class="corner corner-2"></div></div>	<div class="item item-3"><div class="corner corner-3"></div></div>	<div class="item item-4"><div class="corner corner-4"></div></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Fun stuff with transforms, transitions and border radius - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; width: 100%; height: 100%; background-color: #ecf0f1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.container,
.item { -webkit-transition: all 1.5s ease; transition: all 1.5s ease;
}
.container { width: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;
}
.container:hover { -webkit-transform: translateX(40px); transform: translateX(40px);
}
.container:hover .item { box-shadow: 10px -10px 10px 0px #4d4d4d;
}
.container:hover .item-1 { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.container:hover .item-2 { -webkit-transform: rotate(45deg) translateY(70px) translateX(50px); transform: rotate(45deg) translateY(70px) translateX(50px); border-top-right-radius: 50%;
}
.container:hover .item-3 { -webkit-transform: rotate(45deg) translateY(50px) translateX(-70px); transform: rotate(45deg) translateY(50px) translateX(-70px); border-bottom-left-radius: 50%;
}
.container:hover .item-4 { -webkit-transform: rotate(45deg) translateY(121px) translateX(-20px); transform: rotate(45deg) translateY(121px) translateX(-20px); border-bottom-right-radius: 50%;
}
.item { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 100px; min-height: 100px; font-size: 22px; background-color: #333333; color: white; box-shadow: 10px 10px 10px 0px #4d4d4d;
}
.item-1 { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.item-2 { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.item-3 { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
.corner { width: 50px; height: 50px; background-color: #3498db;
}
.corner-1 { border-radius: 0;
}
.corner-2 { border-radius: 0 50% 0 0;
}
.corner-3 { border-radius: 0 0 0 50%;
}
.corner-4 { border-radius: 0 0 50% 0;
}

Fun stuff with transforms, transitions and border radius - Script Codes JS Codes

/*	Hover!	Fun times with https://codepen.io/fpetruschke/ and a few beers!
*/
Fun stuff with transforms, transitions and border radius - Script Codes
Fun stuff with transforms, transitions and border radius - Script Codes
Home Page Home
Developer Andreas Neeven
Username aneeven
Uploaded September 18, 2022
Rating 3
Size 2,865 Kb
Views 36,432
Do you need developer help for Fun stuff with transforms, transitions and border radius?

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!

Andreas Neeven (aneeven) Script Codes
Name
Mail Element Concept
Digital Sucks
Custom Profile
Neon Hexagons SVG Image-Fill
Yet another card...
SVG Heart Animation
Flexbox align
Yay for blend-modes
Some card animation
Flexbox grow, shrink and basis
Create amazing marketing copy 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!