summaryrefslogtreecommitdiffstats
path: root/basicsuite/webengine/content/morphingcubes/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'basicsuite/webengine/content/morphingcubes/index.html')
-rw-r--r--basicsuite/webengine/content/morphingcubes/index.html286
1 files changed, 0 insertions, 286 deletions
diff --git a/basicsuite/webengine/content/morphingcubes/index.html b/basicsuite/webengine/content/morphingcubes/index.html
deleted file mode 100644
index a5731f1..0000000
--- a/basicsuite/webengine/content/morphingcubes/index.html
+++ /dev/null
@@ -1,286 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
-
-<html lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <title>Morphing Power Cubes</title>
- <style type="text/css" media="screen">
- body {
- background-color: black;
- color: white;
- font-family: 'Lucida Grande', Verdana, Arial;
- font-size: 12px;
- background-image: -webkit-gradient(radial,
- 50% 500, 1,
- 50% 500, 400,
- from(rgba(255, 255, 255, 0.3)),
- to(rgba(255, 255, 255, 0)));
- background-repeat: no-repeat;
- }
-
- #container {
- width: 100%;
- height: 700px;
- -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
- -webkit-perspective-origin: 50% 225px;
- }
- #stage {
- width: 100%;
- height: 100%;
- -webkit-transition: -webkit-transform 2s;
- -webkit-transform-style: preserve-3d;
- }
-
- #shape {
- position: relative;
- top: 160px;
- margin: 0 auto;
- height: 200px;
- width: 200px;
- -webkit-transform-style: preserve-3d;
- }
-
- .plane {
- position: absolute;
- height: 200px;
- width: 200px;
- border: 1px solid white;
- -webkit-border-radius: 12px;
- -webkit-box-sizing: border-box;
- text-align: center;
- font-family: Times, serif;
- font-size: 124pt;
- color: black;
- background-color: rgba(255, 255, 255, 0.6);
- -webkit-transition: -webkit-transform 2s, opacity 2s;
- -webkit-backface-visibility: hidden;
- }
-
- #shape.backfaces .plane {
- -webkit-backface-visibility: visible;
- }
-
- #shape {
- -webkit-animation: spin 8s infinite linear;
- }
-
- @-webkit-keyframes spin {
- from { -webkit-transform: rotateY(0); }
- to { -webkit-transform: rotateY(-360deg); }
- }
-
- /* ---------- cube styles ------------- */
- .cube > .one {
- opacity: 0.5;
- -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
- }
-
- .cube > .two {
- opacity: 0.5;
- -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
- }
-
- .cube > .three {
- opacity: 0.5;
- -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
- }
-
- .cube > .four {
- opacity: 0.5;
- -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
- }
-
- .cube > .five {
- opacity: 0.5;
- -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
- }
-
- .cube > .six {
- opacity: 0.5;
- -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
- }
-
-
- .cube > .seven {
- -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
- }
-
- .cube > .eight {
- -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
- }
-
- .cube > .nine {
- -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
- }
-
- .cube > .ten {
- -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
- }
-
- .cube > .eleven {
- -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
- }
-
- .cube > .twelve {
- -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
- }
-
- /* ---------- ring styles ------------- */
- .ring > .one {
- -webkit-transform: translateZ(380px);
- }
-
- .ring > .two {
- -webkit-transform: rotateY(30deg) translateZ(380px);
- }
-
- .ring > .three {
- -webkit-transform: rotateY(60deg) translateZ(380px);
- }
-
- .ring > .four {
- -webkit-transform: rotateY(90deg) translateZ(380px);
- }
-
- .ring > .five {
- -webkit-transform: rotateY(120deg) translateZ(380px);
- }
-
- .ring > .six {
- -webkit-transform: rotateY(150deg) translateZ(380px);
- }
-
- .ring > .seven {
- -webkit-transform: rotateY(180deg) translateZ(380px);
- }
-
- .ring > .eight {
- -webkit-transform: rotateY(210deg) translateZ(380px);
- }
-
- .ring > .nine {
- -webkit-transform: rotateY(-120deg) translateZ(380px);
- }
-
- .ring > .ten {
- -webkit-transform: rotateY(-90deg) translateZ(380px);
- }
-
- .ring > .eleven {
- -webkit-transform: rotateY(300deg) translateZ(380px);
- }
-
- .ring > .twelve {
- -webkit-transform: rotateY(330deg) translateZ(380px);
- }
-
- .controls {
- width: 80%;
- margin: 0 auto;
- padding: 5px 20px;
- -webkit-border-radius: 12px;
- background-color: rgba(255, 255, 255, 0.5);
- }
- .controls > div {
- margin: 10px;
- }
- </style>
- <script type="text/javascript" charset="utf-8">
- function hasClassName(inElement, inClassName)
- {
- var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
- return regExp.test(inElement.className);
- }
-
- function addClassName(inElement, inClassName)
- {
- if (!hasClassName(inElement, inClassName))
- inElement.className = [inElement.className, inClassName].join(' ');
- }
-
- function removeClassName(inElement, inClassName)
- {
- if (hasClassName(inElement, inClassName)) {
- var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
- var curClasses = inElement.className;
- inElement.className = curClasses.replace(regExp, ' ');
- }
- }
-
- function toggleClassName(inElement, inClassName)
- {
- if (hasClassName(inElement, inClassName))
- removeClassName(inElement, inClassName);
- else
- addClassName(inElement, inClassName);
- }
- function toggleShape()
- {
- var shape = document.getElementById('shape');
- if (hasClassName(shape, 'ring')) {
- removeClassName(shape, 'ring');
- addClassName(shape, 'cube');
- } else {
- removeClassName(shape, 'cube');
- addClassName(shape, 'ring');
- }
- // Move the ring back in Z so it's not so in-your-face.
- var stage = document.getElementById('stage');
- if (hasClassName(shape, 'ring'))
- stage.style.webkitTransform = 'translateZ(-200px)';
- else
- stage.style.webkitTransform = '';
- }
- function toggleBackfaces()
- {
- var backfacesVisible = document.getElementById('backfaces').checked;
- var shape = document.getElementById('shape');
- if (backfacesVisible)
- addClassName(shape, 'backfaces');
- else
- removeClassName(shape, 'backfaces');
- }
- </script>
-</head>
-<body>
-
- <div class="controls">
- <h1>Animations, Transitions and 3D Transforms</h1>
- <p>This demo shows some more interesting content using 3D transforms, animations and transitions.
- Note that you can still select the text on the the elements, even while they are rotating. Transforms elements remain
- fully interactive.</p>
- <p>Click Toggle Shape to switch between nested cubes and one big ring. Note how the planes move smoothly to their new locations,
- even while the whole shape is rotating. You can even interrupt this transition by clicking again, and they move back smoothly.</p>
- <p>Toggle the Backfaces Visible checkbox to turn backfaces on and off using <code>-webkit-backface-visibility</code>.</p>
- <div><button onclick="toggleShape()">Toggle Shape</button></div>
- <div><input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked><label for="backfaces">Backfaces visible</label></div>
- </div>
-
- <div id="container">
- <div id="stage">
- <div id="shape" class="cube backfaces">
- <div class="plane one">1</div>
- <div class="plane two">2</div>
- <div class="plane three">3</div>
- <div class="plane four">4</div>
- <div class="plane five">5</div>
- <div class="plane six">6</div>
- <div class="plane seven">7</div>
- <div class="plane eight">8</div>
- <div class="plane nine">9</div>
- <div class="plane ten">10</div>
- <div class="plane eleven">11</div>
- <div class="plane twelve">12</div>
- </div>
- </div>
- </div>
- <div id="footer"></div>
- <script language="javascript">
- var container = document.getElementById("footer");
- container.innerHTML = "<div style=\"font-family: monospace; font-size: 15px; margin: 0px auto 0px; padding: 2em; width: 600px; "
- + "height 100px; text-align: center; color: black; background-color: rgb(238, 238, 238);\">" + navigator.userAgent + "</div>";
- </script>
-</body>
-</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-10 20:38:48 +0000