From f868312fb6f1b6a8d7f337afcb3ec94481d3571b Mon Sep 17 00:00:00 2001 From: Andras Becsi Date: Mon, 23 Jun 2014 11:14:50 +0200 Subject: webengine: Add offline Morphing Cubes demo This is a well known CSS3 transitions and 3D transforms demo and was retrieved from: https://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html. Change-Id: Ibbc08bf8520cb380e5de401da599a39daf0574e1 Reviewed-by: Laszlo Agocs --- basicsuite/webengine/content/index.html | 1 + .../webengine/content/morphingcubes/index.html | 286 +++++++++++++++++++++ .../webengine/content/morphingcubes/screenshot.png | Bin 0 -> 15607 bytes 3 files changed, 287 insertions(+) create mode 100644 basicsuite/webengine/content/morphingcubes/index.html create mode 100644 basicsuite/webengine/content/morphingcubes/screenshot.png diff --git a/basicsuite/webengine/content/index.html b/basicsuite/webengine/content/index.html index d4bf355..3cbeb16 100644 --- a/basicsuite/webengine/content/index.html +++ b/basicsuite/webengine/content/index.html @@ -31,6 +31,7 @@
+
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 @@ + + + + + + + Morphing Power Cubes + + + + + +
+

Animations, Transitions and 3D Transforms

+

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.

+

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.

+

Toggle the Backfaces Visible checkbox to turn backfaces on and off using -webkit-backface-visibility.

+
+
+
+ +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+
+
+ + + + diff --git a/basicsuite/webengine/content/morphingcubes/screenshot.png b/basicsuite/webengine/content/morphingcubes/screenshot.png new file mode 100644 index 0000000..9d36114 Binary files /dev/null and b/basicsuite/webengine/content/morphingcubes/screenshot.png differ -- cgit v1.2.3