3d css transformations
How do I make an 3d css transformations?
Cube follows your mouse. What is a 3d css transformations? How do you make a 3d css transformations? This script and codes were developed by Darby Rathbone on 03 October 2022, Monday.
3d css transformations - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3d css transformations </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container container--realistic'> <div class='cube'> <div class='face'>1</div> <div class='face'>2</div> <div class='face'>3</div> <div class='face'>4</div> <div class='face'>5</div> <div class='face'>6</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
3d css transformations - Script Codes CSS Codes
body { width:100%;
}
table { width:100%;
}
td { text-align:center; width:25%;
}
.cube { margin:100px; position: absolute; width: 100px; height: 100px; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(50deg) rotateX(56deg); -webkit-transition-timing-function: linear; -webkit-transition-duration:200ms;
}
.face { background-color:RGBA(0, 0, 0, .25); text-align:center; color:RGBA(255, 255, 255, .5); line-height:100px; font-size:100px; border:dashed 1px RGBA(255, 255, 255, 1); position:fixed; width: 100%; height: 100%;
}
.container { -webkit-transform:translateX(-150px) translateY(-150px); -webkit-transition-timing-function: ease-out; transition-duration:2000ms;
}
.face:nth-child(1) { transform: rotateY(0deg) translateZ(50px /* half the side length */ ); -webkit-transform: rotateY(0deg) translateZ(50px /* half the side length */ );
}
.face:nth-child(2) { -webkit-transform: rotateY(90deg) translateZ(50px);
}
.face:nth-child(3) { -webkit-transform: rotateY(180deg) translateZ(50px);
}
.face:nth-child(4) { -webkit-transform: rotateY(270deg) translateZ(50px);
}
.face:nth-child(5) { -webkit-transform: rotateX(270deg) translateZ(50px);
}
.face:nth-child(6) { -webkit-transform: rotateX(90deg) translateZ(50px);
}
3d css transformations - Script Codes JS Codes
var text = document.createElement('table');
document.body.appendChild(text);
var b = [0, 0];
var a = document.getElementsByClassName('cube');
var s = "";
var f = document.getElementsByClassName('face');
requestAnimationFrame(displaytables);
var mouse = [0, 0];
window.onmousemove = function (e) { mouse[0] = e.pageX; mouse[1] = e.pageY;
};
function displaytables() { text.innerHTML = ''; printToTable(document.getElementsByClassName('container')); printToTable(a); requestAnimationFrame(displaytables);
}
setTimeout(function(){a[0].style['-webkit-transform'] = "rotateY(0deg) rotateX(1deg)";},100);
(document.getElementsByClassName('container')[0]).addEventListener('webkitTransitionEnd',function(){recalculate();});
a[0].addEventListener("webkitTransitionEnd", function(){ if (!Boolean(b[0])) { b[0] = 1; b[1] = 0; } a[0].style['-webkit-transform'] = "rotateY(" + b[0] + "deg) rotateX(" + b[1] + "deg)"; b[0] += 15; //e.pageX; }, true);
function recalculate(e) { document.getElementsByClassName('container')[0].style.webkitTransform = " translate(" + (((mouse[0]) - 150)|0) + "px, " + (((mouse[1]) - 150)|0) + "px)"; //b[1] -= e.pageY;
};
function printToTable(data) { [].forEach.call(data, function (da) { s = window.getComputedStyle(da)['webkitTransform']; var comma = s.split(/\(([^\)]+)\)/g)[1].split(',').map(parseFloat), result = [ [], [], [], [] ]; comma.forEach(function (e, i) { result[i % 4].push(e.toFixed(12)); }); text.innerHTML += result.map(function (e) { return "<tr><td>" + e.join('</td><td>') + "</td></tr>"; }).join(''); });
}
Developer | Darby Rathbone |
Username | blackkbot |
Uploaded | October 03, 2022 |
Rating | 3 |
Size | 2,652 Kb |
Views | 26,312 |
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 |
Sphere detail | 2,558 Kb |
3d pure javascript 2d canvas | 2,600 Kb |
Ball physics | 3,874 Kb |
Sudoku grid | 2,042 Kb |
Slow Delaunay triangulation | 3,316 Kb |
Golden ratio | 1,893 Kb |
Canvas buffer | 2,791 Kb |
Webworker with an editable textbox | 3,525 Kb |
Jigsaw puzzle | 5,193 Kb |
Graphing equations | 3,529 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 |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Getting Started | Viblast | 1,500 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 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!