ScaleZ Demo
How do I make an scalez demo?
This is used to embed in my blog http://agelber.com/blog/3d-transforms. What is a scalez demo? How do you make a scalez demo? This script and codes were developed by Assaf Gelber on 03 January 2023, Tuesday.
ScaleZ Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ScaleZ Demo</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300';
body { margin-top: 50px; overflow: hidden; font-family: Source Sans Pro; perspective: 400px;
}
#element { box-sizing: border-box; position: absolute; left: 250px; width: 100px; height: 100px; background: #387FF2; border: 3px solid #444; margin: 0 auto; transform: rotateY(60deg);
}
.slider, #css { position: relative;
}
.slider input, #css input { vertical-align: middle;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='element'></div>
<div class='slider'> <label>Z:</label> <input id='zslider' max='2.5' min='' step='0.1' type='range' value='1'>
</div>
<div id='css'>transform: scaleZ(1)</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
ScaleZ Demo - Script Codes CSS Codes
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300';
body { margin-top: 50px; overflow: hidden; font-family: Source Sans Pro; perspective: 400px;
}
#element { box-sizing: border-box; position: absolute; left: 250px; width: 100px; height: 100px; background: #387FF2; border: 3px solid #444; margin: 0 auto; transform: rotateY(60deg);
}
.slider, #css { position: relative;
}
.slider input, #css input { vertical-align: middle;
}
ScaleZ Demo - Script Codes JS Codes
var el = document.getElementById('element'), css = document.getElementById('css'), z = 1;
document.getElementById('zslider').addEventListener('change', function() { z = this.value; update();
}, false);
function update() { var prop = 'scaleZ(' + z + ')'; el.style[Modernizr.prefixed('transform')] = prop + ' rotateY(60deg)'; css.innerText = 'transform: ' + prop;
}
Developer | Assaf Gelber |
Username | agelber |
Uploaded | January 03, 2023 |
Rating | 3 |
Size | 3,184 Kb |
Views | 10,120 |
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!
Name | Size |
Blurring Menu | 2,934 Kb |
Translate Demo | 3,188 Kb |
Social Link Handle Animation | 3,241 Kb |
Text Looping Transition | 5,619 Kb |
Transition Demo | 2,780 Kb |
CSS Animated Bio Card | 4,004 Kb |
Perspective Origin Demo | 3,614 Kb |
Skew Demo | 3,209 Kb |
Carousel Tutorial Demo | 3,266 Kb |
CSS Only Single-Element 3D Cuboid | 2,913 Kb |
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!
Name | Username | Size |
Portfolio Page | KaylaMT | 1,983 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
Find The Penguin | Lelder | 2,212 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!