Css3D Wall

Developer
Gianluca Guarini
Size
2,441 Kb
Views
16,192
  1. Css3D Wall Previews
  2. Css3D Wall HTML Codes
  3. Css3D Wall CSS Codes
  4. Css3D Wall JS Codes

How do I make an css3d wall?

What is a css3d wall? How do you make a css3d wall? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

Css3D Wall Previews
IQ Test

Css3D Wall - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css3D Wall</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"> <ul> <li><div>C</div></li> <li><div>S</div></li> <li><div>S</div></li> <li><div>3</div></li> <li><div>3</div></li> <li><div>D</div></li> <li><div>I</div></li> <li><div>S</div></li> <li><div>C</div></li> <li><div>O</div></li> <li><div>O</div></li> <li><div>L</div></li> </ul>
</div> <script src='https://code.jquery.com/jquery-1.8.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Css3D Wall - Script Codes CSS Codes

html { height:100%; background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 960, from(#f700dd), to(#7c006f)) no-repeat #7c006f; background: -moz-radial-gradient(50% 50% 0deg,ellipse farthest-corner, #f700dd, #7c006f, #7c006f 170%);	-webkit-user-select: none;	cursor:move;
}
body {	margin:0;
}
ul, li {	margin:0;	list-style:none;	float:left;
}
ul{	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	-o-transform-style: preserve-3d;	-ms-transform-style: preserve-3d;	transform-style: preserve-3d;	}
li {	margin: 10px 15px ;	width:150px;	height:90px;	background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(rgba(0,0,0,0.2)), to(transparent)) no-repeat rgba(255,255,255,0.1);	background: -moz-radial-gradient(50% 50% 0deg,ellipse farthest-corner,rgba(0,0,0,0.2) , transparent, transparent 100%), rgba(255,255,255,0.1);	-webkit-user-select: none; border-top:1px solid rgba(255,255,255, 0.6); border-right:1px solid rgba(255,255,255, 0.3); border-bottom:1px solid rgba(255,255,255, 0.2); border-left:1px solid rgba(255,255,255, 0.1);	color:#FFF;	text-align:center;	padding:20px 0;	font: 70px "Arial Black", Gadget, sans-serif;
}
ul li div {	transform:translateZ(70px);	-ms-transform:translateZ(70px); /* IE9 */	-moz-transform:translateZ(70px); /* Firefox */	-webkit-transform:translateZ(70px); /* Safari and Chrome */	-o-transform:translateZ(70px);/* Opera */ position:absolute; width:150px;	}
.container {	width:820px;	margin:50px auto;	position:relative;
}

Css3D Wall - Script Codes JS Codes

 var mouseX = null, mouseY = null, rotationLeftRight = null, rotationTopBottom = null, centerX = null, centerY = null, agleRotation = null;	$('html').mousemove(function(e){	centerX = $(this).width() / 2 ;	centerY = $(this).height() / 2;	mouseX = (e.pageX - this.offsetLeft) - centerX;	mouseY = (e.pageY - this.offsetTop) - centerY;	rotationLeftRight = mouseX;	rotationTopBottom = mouseY;	agleRotation = (Math.abs(rotationTopBottom) + Math.abs((rotationLeftRight))) / 10;	$('ul').css({	transform: "rotate3d("+rotationTopBottom +", "+rotationLeftRight+", "+0+", "+agleRotation+"deg)"	});	})
Css3D Wall - Script Codes
Css3D Wall - Script Codes
Home Page Home
Developer Gianluca Guarini
Username GianlucaGuarini
Uploaded November 04, 2022
Rating 3
Size 2,441 Kb
Views 16,192
Do you need developer help for Css3D Wall?

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!

Gianluca Guarini (GianlucaGuarini) Script Codes
Name
The Dark Loop
A Pen by Gianluca Guarini
Find your mouse cursor
The Milk Glass
The Fly
The Best Flash Site Ever
Full screen menu
Threejs-amd-bootstrap
Drunk on Google Maps
Mario Bros
Create amazing blog posts 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!