Javascript 中的 Html5 CSS3 3D 立方体
有一段时间，我一直在尝试在常规的网络浏览器中创建 3D 对象，而不借助 Flash、Silverlight 等插件。这里显示的立方体改编自我之前制作的另一个 3D 网站。
WebGL使我们能够在浏览器中渲染复杂的 3D 模型。不过，在这里我将介绍如何使用各种CSS3转换命令可以采用常规的 2D Html 元素并将其投影到 3D 空间中。
在常规 Html 元素上使用 3D 变换的优势在于，您可以将Iframe内容、图像或任何其他 html 元素投影到 3D 中，从而产生一些非常漂亮的效果。
实时预览
这是使用一些图片和文字制作的魔方示例。您可以使用鼠标旋转魔方。
兼容性
由于此处显示的 3D 立方体使用 CSS3 矩阵变换，而不是其他一些 3D 立方体使用的普通旋转、缩放、平移方法，因此它在 IE11 中运行良好。除了 IE11，它还在 Firefox、Chrome、Safari 和 iOS 版 Mobile Safari 中进行了测试。
HTML 源代码
这里最重要的是我们包含“Cube.js”文件。我们还需要JQuery ，也包括在内。
ID 为my3Dsurface的Div将包含我们的 3D 立方体。请注意data-facewidth="256"属性。这指定了立方体面的大小。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Css3 3D Sample</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/cube.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="my3Dsurface" class="js3dsurface" data-facewidth="256"></div>
</body>
</html>
Javascript 源代码
接下来，我们创建一个Js3DSurface实例，并向其传递一个内容数组，该数组将显示在立方体的每个面上。在此示例中，我们使用图像和简单的 html 内容。您可以添加更复杂的 html，例如 Iframe、视频标签等。
我们还添加了 3 个事件处理程序，以便我们能够使用鼠标旋转立方体。当鼠标移动且鼠标左键按下时，我们调用adjRot并向其传递新的 X 和鼠标的 Y 位置。
var cube;
var mouseisdown = false;
$(document).ready(function () {
var faces = new Array();
faces.push('<img src="images/manic-miner-willy.jpg" />');
faces.push('<img src="images/terminator-t-800-head-design.png" />');
faces.push('<div class=
"plain"><h1>3D Cube!</h1><p>Some pla
in html content to be projected onto the side of the cube! Works
in the latest versions of Chrome, Firefox, IE, Safari, Safari Mobile and other Html5 modern browsers.</div>');
faces.push('<img src="images/sinclair-c5.jpg" />');
faces.push('<img src="images/terminator-t-800-head-design.png" />');
faces.push('<img src="images/sinclair-c5.jpg" />');
cube = new Js3DSurface("my3Dsurface", faces);
cube._backSurface.addEventListener('mousemove', mousemove, false);
document.body.addEventListener('mousedown', mousedown, false);
document.body.addEventListener('mouseup', mouseup, false);
});
function mousedown(e) {
mouseisdown = true;
if (e != null) {
e.stopPropagation();
e.preventDefault();
}
returnfalse;
}
function mouseup(e) {
mouseisdown = false;
if (e != null) {
e.stopPropagation();
e.preventDefault();
}
returnfalse;
}
function mousemove(e) {
if (mouseisdown) {
var _off = $(cube._backSurface).offset();
var x = e.clientX - _off.left;
var y = e.clientY - _off.top;
y += $(window).scrollTop();
adjRot(x, y);
}
}
function adjRot(x, y) {
var w = $(cube._backSurface).width();
var h = $(cube._backSurface).height();
var step = 10;
var ry = (((x - (w / 2)) / w) * step);
var rx = (((y - (h / 2)) / h) * step);
cube._cubes[0]._Torque._Y = ry;
cube._cubes[0]._Torque._X = rx;
}
从下面的链接获取示例代码并开始创建很酷的 3D 项目 Html 立方体！
提交评论
您的评论已提交。我们将对其进行审核，然后才将其显示在网站上。
