diff options
Diffstat (limited to 'basicsuite/webengine/content/csstetrahedron')
-rw-r--r-- | basicsuite/webengine/content/csstetrahedron/index.html | 25 | ||||
-rw-r--r-- | basicsuite/webengine/content/csstetrahedron/screenshot.png | bin | 7405 -> 0 bytes | |||
-rw-r--r-- | basicsuite/webengine/content/csstetrahedron/style.css | 109 |
3 files changed, 0 insertions, 134 deletions
diff --git a/basicsuite/webengine/content/csstetrahedron/index.html b/basicsuite/webengine/content/csstetrahedron/index.html deleted file mode 100644 index 540890b..0000000 --- a/basicsuite/webengine/content/csstetrahedron/index.html +++ /dev/null @@ -1,25 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> - <title>A tetrahedron built with CSS 3D transforms</title> - <link rel="stylesheet" href="style.css" /> -</head> -<body bgcolor="black"> -<div id="header"></div> -<article id="viewport"> - <section id="pyramid"> - <div></div> - <div></div> - <div></div> - <div></div> - </section> -</article> -<script language="javascript"> -var container = document.getElementById("header"); -container.innerHTML = "<div style=\"font-family: monospace; font-size: 13px; margin: 5em auto 0px; padding: 2em; width: 600px; " - + "height 100px; text-align: center; background-color: rgb(238, 238, 238);\">" + navigator.userAgent + "</div>"; -</script> -</body> -</html>
\ No newline at end of file diff --git a/basicsuite/webengine/content/csstetrahedron/screenshot.png b/basicsuite/webengine/content/csstetrahedron/screenshot.png Binary files differdeleted file mode 100644 index 1c1283f..0000000 --- a/basicsuite/webengine/content/csstetrahedron/screenshot.png +++ /dev/null diff --git a/basicsuite/webengine/content/csstetrahedron/style.css b/basicsuite/webengine/content/csstetrahedron/style.css deleted file mode 100644 index 70d872a..0000000 --- a/basicsuite/webengine/content/csstetrahedron/style.css +++ /dev/null @@ -1,109 +0,0 @@ -#pyramid { - position: relative; - margin: 0px auto; - height: 350px; - width: 100px; - -webkit-transform-style: preserve-3d; - -webkit-animation: spin 10s linear infinite; - -webkit-transform-origin: 116px 200px 116px; - - -moz-transform-style: preserve-3d; - -moz-animation: spin 10s linear infinite; - -moz-transform-origin: 116px 200px 116px; - - -ms-transform-style: preserve-3d; - -ms-animation: spin 10s linear infinite; - -ms-transform-origin: 116px 200px 116px; - - transform-style: preserve-3d; - animation: spin 10s linear infinite; - transform-origin: 116px 200px 116px; - -} - -@-webkit-keyframes spin { - from { - -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); - } - to { - -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); - } -} - -@-moz-keyframes spin { - from { - -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); - } - to { - -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); - } -} - -@-ms-keyframes spin { - from { - -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); - } - to { - -ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); - } -} - -@keyframes spin { - from { - transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); - } - to { - transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); - } -} - -#pyramid > div { - position: absolute; - border-style: solid; - border-width: 200px 0 200px 346px; - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -ms-transform-origin: 0 0; - transform-origin: 0 0; -} - -/* Put some text on each face */ -#pyramid > div:after { - position: absolute; - content: "QtWebEngine"; - color: #fff; - left: -250px; - text-align: center; -} - -#pyramid > div:first-child { - border-color: transparent transparent transparent rgba(40, 150, 10, 0.6); - -webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); - -moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); - -ms-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); - transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); -} - -#pyramid > div:nth-child(2) { - border-color: transparent transparent transparent rgba(30, 120, 10, 0.6); - -webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); - -moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); - -ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); - transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); -} - -#pyramid > div:nth-child(3) { - border-color: transparent transparent transparent rgba(20, 100, 10, 0.9); - -webkit-transform: rotateX(60deg) rotateY(19.5deg); - -moz-transform: rotateX(60deg) rotateY(19.5deg); - -ms-transform: rotateX(60deg) rotateY(19.5deg); - transform: rotateX(60deg) rotateY(19.5deg); -} - -#pyramid > div:nth-child(4) { - border-color: transparent transparent transparent rgba(10, 80, 10, 0.8); - -webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); - -moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); - -ms-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); - transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); -} |