diff options
| author | Kalle Viironen <kalle.viironen@digia.com> | 2014-07-04 09:49:57 +0300 |
|---|---|---|
| committer | Kalle Viironen <kalle.viironen@digia.com> | 2014-07-04 09:50:13 +0300 |
| commit | 13d16d204eb5d9e92a6099c0b90e2730f043c04f (patch) | |
| tree | bee88085e3f53993509af326959dffeb64fded35 /basicsuite/webengine/content/morphingcubes/index.html | |
| parent | c7edfa22fadbb5041b8dee1d5cd27adfcfb7f833 (diff) | |
| parent | 3473ec2b9a38a703310b773e51ce059a8423e379 (diff) | |
Merge commit '3473ec2b9a38a703310b773e51ce059a8423e379' into releaseQtEE_v3.1.0
* commit '3473ec2b9a38a703310b773e51ce059a8423e379': (32 commits)
[Doc] Use symbolic links for demo preview images
Changed the audio track on the Qt_EnterpriseEmbedded_1080p.mp4 video.
Fix demo descriptions.
launchersettings: make ip field span two columns
Remove deleted demos also from doc
Update all VirtualKeyboard import to version 1.1
Doc: Bump version to 3.1.0
Doc: Content/language improvement for About QtEE demo.
Disable GraphicalEffects demo on beagleboneblack
about: fit text properly to the box
Fix Meet Qt Enterprise Embedded video url on startup
Fix a typo in the new About presentation
About Boot to Qt-demo update
Update Enterprise gallery demo description
Remove incorrect assingment of QUrl to bool
Add Meet Qt Enterprise Embedded video to mediaplayer demo
disable camera and sensor demo from Toradex Apalis iMX6
webengine: enable the browser example on android-nexus7v2
Delete obsoleted demos from Boot2Qt launcher
webengine: Add offline Morphing Cubes demo
...
Change-Id: Ic39278a1bc92386b9b9fe15e9d90097a67656a37
Diffstat (limited to 'basicsuite/webengine/content/morphingcubes/index.html')
| -rw-r--r-- | basicsuite/webengine/content/morphingcubes/index.html | 286 |
1 files changed, 286 insertions, 0 deletions
diff --git a/basicsuite/webengine/content/morphingcubes/index.html b/basicsuite/webengine/content/morphingcubes/index.html new file mode 100644 index 0000000..a5731f1 --- /dev/null +++ b/basicsuite/webengine/content/morphingcubes/index.html @@ -0,0 +1,286 @@ +<!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> |