3D Transforms - Part 2

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

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

What is a 3d transforms - part 2? How do you make a 3d transforms - part 2? This script and codes were developed by Fezzik on 25 November 2022, Friday.

3D Transforms - Part 2 Previews
IQ Test

3D Transforms - Part 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Transforms - Part 2</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 2</h1>	<div class="wrap">	<div class="side-a"></div>	<div class="side-b"></div>	</div>
</body>
</html>
</body>
</html>

3D Transforms - Part 2 - Script Codes CSS Codes

/* PAGE STYLES */
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 STYLES */
body { /* 'perspective' prepares the webpage for a 3D affect. NOTE: 800px to 1000px is a pretty common value.*/ -webkit-perspective: 800px; -webkit-perspective-origin: top left; /* 'perspective-origin' defaults to 50% 50%. A value less than 50% is left or bottom. A value greater than 50% is right or top.*/
}
.wrap { /* Create a smooth transition. */ transition: -webkit-transform 1s ease-in; -webkit-transform-style: preserve-3d; /* 'preserve-3d' passes down the 3d space defined in the body 'perspective: 800px' only to the direct child elements .side-a and .side-b nested inside .wrap. */
}
.wrap div { position: absolute; -webkit-backface-visibility: hidden;
}
.side-a { z-index: 100;
}
.side-b { -webkit-transform: rotateY(-180deg);
}
.wrap:hover { /*** 3D affect occurs on hover. ***/ /*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); -webkit-transform: translateZ(-200px); // Moves the object toward, or away from, the viewer. -webkit-transform: translate3d(100px,50px,150px); // Moves the object toward, or away from, the viewer. -webkit-transform: scaleZ(); // 'scaleZ' scales objects on the Z axis. Its number value gets multiplied by the element's current position on the Z axis as defined by 'translateZ', so 'scaleZ' is dependent upon 'translateZ'. -webkit-transform: scaleZ(2) translateZ(200px); // ...so this is the equivalent of translateZ a value of 400px. */ -webkit-transform: rotateY(-1turn);
}
3D Transforms - Part 2 - Script Codes
3D Transforms - Part 2 - Script Codes
Home Page Home
Developer Fezzik
Username Fezzik
Uploaded November 25, 2022
Rating 3
Size 2,529 Kb
Views 12,144
Do you need developer help for 3D Transforms - Part 2?

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
Text Properties
Device-Specific Media Queries - Part 1
Transitions - Part 2
Flexbox - Part 1
Flexbox - Part 2
Box Shadows
Full-page Animation Project - Part 3
Web Fonts
Full-page Animation Project - Page 2
List Properties
Create amazing sales emails 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!