3D graphics Displays a 3D model of a cube. The 3D model can be rotated by pressing the cross key, and the viewing angle (x-axis, y-axis, z-axis) can be returned.'s game

Click here for free DL of the app version that can save data.

No:2247

4521

←

Prev Next

→

3D graphics Displays a 3D model of a cube. The 3D ..ALL
Developer もちきなこ｜Date and time 23/6/20 18:11:32
Build time 50.559 sec｜Game capacity 3.793KB｜

Script

このアプリは、JavaScriptを使って3Dグラフィックのキューブ型の3Dモデルを表示するゲームです。十字キーを押すことで回転させることができ、見る角度(x軸、y軸、z軸)を変えることが可能です。スマホでも操作がしやすいように、見やすさを意識して絵文字を多用しました。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>3D Cube Game</title>
	<style type="text/css">
		#container {
			-webkit-perspective: 800px;
			-moz-perspective: 800px;
			-o-perspective: 800px;
			perspective: 800px;
			margin: auto;
			width: 50%;
			height: 300px;
			position: relative;
		}

#cuboid {
			width: 100%;
			height: 100%;
			position: absolute;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
			-webkit-transition: -webkit-transform 2s linear;
			-moz-transition: -moz-transform 2s linear;
			-o-transition: -o-transform 2s linear;
			transition: transform 2s linear;
		}

#front {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #f00;
			-webkit-transform: translateZ(150px);
			-moz-transform: translateZ(150px);
			-o-transform: translateZ(150px);
			transform: translateZ(150px);
		}

#back {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #0f0;
			-webkit-transform: rotateY(180deg) translateZ(150px);
			-moz-transform: rotateY(180deg) translateZ(150px);
			-o-transform: rotateY(180deg) translateZ(150px);
			transform: rotateY(180deg) translateZ(150px);
		}

#left {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #00f;
			-webkit-transform: rotateY(-90deg) translateZ(150px);
			-moz-transform: rotateY(-90deg) translateZ(150px);
			-o-transform: rotateY(-90deg) translateZ(150px);
			transform: rotateY(-90deg) translateZ(150px);
		}

#right {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #ff0;
			-webkit-transform: rotateY(90deg) translateZ(150px);
			-moz-transform: rotateY(90deg) translateZ(150px);
			-o-transform: rotateY(90deg) translateZ(150px);
			transform: rotateY(90deg) translateZ(150px);
		}

#top {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #f0f;
			-webkit-transform: rotateX(90deg) translateZ(150px);
			-moz-transform: rotateX(90deg) translateZ(150px);
			-o-transform: rotateX(90deg) translateZ(150px);
			transform: rotateX(90deg) translateZ(150px);
		}

#bottom {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #0ff;
			-webkit-transform: rotateX(-90deg) translateZ(150px);
			-moz-transform: rotateX(-90deg) translateZ(150px);
			-o-transform: rotateX(-90deg) translateZ(150px);
			transform: rotateX(-90deg) translateZ(150px);
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="cuboid">
			<div id="front"></div>
			<div id="back"></div>
			<div id="left"></div>
			<div id="right"></div>
			<div id="top"></div>
			<div id="bottom"></div>
		</div>
	</div>