Box transition

Developer
Parth Viroja
Size
1,784 Kb
Views
22,264
  1. Box transition Previews
  2. Box transition HTML Codes
  3. Box transition CSS Codes

How do I make an box transition?

What is a box transition? How do you make a box transition? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Box transition Previews
IQ Test

Box transition - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Box transition</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="grid-items"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div>
</div>
</body>
</html>

Box transition - Script Codes CSS Codes

* {	padding: 0;	margin: 0;	list-style-type: none;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	-ms-box-sizing: border-box;	-o-box-sizing: border-box;	box-sizing: border-box;
}
body {	background-color: #069;	background-size: cover;	background-repeat: no-repeat;
}
.grid-items {	display: block;	margin: 100px auto;	width:90%;
}
.grid-items::after {	content: '';	position: relative;	display: block;	clear: both;
}
.grid-items .grid-item {	display: inline-block;	height: 120px;	width: 120px;	float: left;	border-radius:20px;	background-color: rgba(0, 0, 0, 0.3);	border:1px dashed #069;	-webkit-transition: all 0.25s ease;	-moz-transition: all 0.25s ease;	-ms-transition: all 0.25s ease;	-o-transition: all 0.25s ease;	transition: all 0.25s ease;	perspective: perspective3d;	perspective-origin: 50% 50%;
}
.grid-items .grid-item:hover {	transform: rotateZ(-135deg) scale(2);	box-shadow:0px 0px 100px rgba(0,0,0,0.9);	background-size: cover;	background-repeat: no-repeat;	opacity:0.8;
}
Box transition - Script Codes
Box transition - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 1,784 Kb
Views 22,264
Do you need developer help for Box transition?

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!

Parth Viroja (parthviroja) Script Codes
Name
Jquery Tab
Treeview using Angular
Remove Class On Click Outside
Custom checkbox and radio with menu
Contextmenu using Jquery
Responsive grid with filter, sort and layout
3D-box
Text Shapes
MY CV
Card border collspan
Create amazing art & images 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!