3D Transforms - Part 1

Developer
Fezzik
Size
2,176 Kb
Views
12,144
  1. 3D Transforms - Part 1 Previews
  2. 3D Transforms - Part 1 HTML Codes
  3. 3D Transforms - Part 1 CSS Codes

How do I make an 3d transforms - part 1?

Transform: rotate3d([X direction], [Y direction], [Z direction], [rotation angle]);. What is a 3d transforms - part 1? How do you make a 3d transforms - part 1? This script and codes were developed by Fezzik on 25 November 2022, Friday.

3D Transforms - Part 1 Previews
IQ Test

3D Transforms - Part 1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Transforms - Part 1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head>	<title>3D Transforms</title>	<link rel="stylesheet" type="text/css" href="page.css">	<link rel="stylesheet" type="text/css" href="transforms.css">
</head>
<body> <h1>3D Transforms - Part 1</h1>	<div class="wrap">	<div class="side-a"></div>	<div class="side-b"></div>	</div>
</body>
</html>
</body>
</html>

3D Transforms - Part 1 - Script Codes CSS Codes

body {	padding-top: 50px;	background: #F7F7F7; font-family: sans-serif;
}
h1 { text-align: center; }
.wrap {	position: relative;	margin: 0 auto;	width: 250px;	height: 350px;	cursor: pointer;
}
.wrap div {	width: 100%;	height: 100%;	border-radius: 10px;	background-position: 50% 50%;	background-size: 150px;	background-repeat: no-repeat;	box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);	color: #FFF;	text-align: center;	text-shadow: 0 1px rgba(0,0,0,.3);	font: bold 3em sans-serif;	line-height: 350px;
}
.side-a {	background: #498FBC url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage11/mike.png');
}
.side-b {	background: #33363B url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage11/mike-transparent.png');
}
/*** Transform ***/
body { -webkit-perspective: 800px; /* 800px to 1000px is a pretty common value. */ /* 'perspective' prepares the webpage for a 3D affect. */
}
.wrap { /* Create a smooth transition. */ transition: -webkit-transform 1s ease-in;
}
.wrap div { position: absolute;
}
.side-a { z-index: 100;
}
.side-b {
}
.wrap:hover { /* 3D affect occurs on hover. */ /* webkit-transform: rotateY(-180deg); */ /*transform: rotate3d([X direction], [Y direction], [Z direction], [rotation angle]); NOTE: X, Y, & Z values are ususally 0 or 1. 1 will rotate on the x-, y-, z- axis to the degree set in the 4th value. 0 will not rotate at all. */ -webkit-transform: rotate3d(1,0,1,65deg);
}
3D Transforms - Part 1 - Script Codes
3D Transforms - Part 1 - Script Codes
Home Page Home
Developer Fezzik
Username Fezzik
Uploaded November 25, 2022
Rating 3
Size 2,176 Kb
Views 12,144
Do you need developer help for 3D Transforms - Part 1?

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!

Fezzik (Fezzik) Script Codes
Name
Media Features and Media Types
Box Shadows
Print Stylesheets
Flexbox - Part 1
Additional Pseudo-Classes
Transitions - Part 1
3D Transforms - Part 2
Web Fonts
Full-page Animation Project - Part 3
Text Properties
Create amazing love letters 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!