Instantly share code, notes, and snippets.

Embed
What would you like to do?
3D Image CSS Transform
<?php
$title = $_GET['title'];
if (isset($_GET['design']) && $_GET['design'] == 'design1') {
$design = 'vorlage_360.png';
} else if (isset($_GET['design']) && $_GET['design'] == 'design2') {
$design = 'vorlage_360_1.png';
} else if (isset($_GET['design']) && $_GET['design'] == 'design3') {
$design = 'san_fran.jpg';
}
?>
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/js/modernizr-2.0.6.min.js"></script>
<title>mymuesli 3D-Dose</title>
<style type="text/css" media="screen">
h1 {font: 167% Arial,Helvetica,sans-serif}
#container {
text-align:center;
top:390px;
width:250px;
-moz-perspective: 3000px;
-webkit-perspective: 3000;
-moz-transform: translate3d(0,380px,0);
-webkit-transform: translate3d(0,380px,0)}
}
#dose:hover {
position: absolute;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused}
#frame {width: 33px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d; /* translate must be last */
-moz-transform: translate3d(125px,-390px,-150px);
-webkit-transform: translate3d(125px,-390px,-150px);
z-index:10
}
#dose {
position: absolute;
top:-363px;
left:-35px;
z-index: 100;
}
.strip {-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-animation: spin 15s infinite linear;
-webkit-animation: spin 10s infinite linear}
.strip div {
position: absolute;
background: #fff url(<?php echo $design;?>);
border:0;
height:728px;
width:33px;
opacity: 1;}
.strip .a {background-position: 0 0;
-moz-transform: rotateY(0deg) translateZ(124px);
-webkit-transform: rotateY(0deg) translateZ(124px)}
.strip .b {background-position: 759px 0;
-moz-transform: rotateY(15deg) translateZ(124px);
-webkit-transform: rotateY(15deg) translateZ(124px)}
.strip .c {background-position: 726px 0;
-moz-transform: rotateY(30deg) translateZ(124px);
-webkit-transform: rotateY(30deg) translateZ(124px)}
.strip .d {background-position: 693px 0;
-moz-transform: rotateY(45deg) translateZ(124px);
-webkit-transform: rotateY(45deg) translateZ(124px)}
.strip .e {background-position: 660px 0;
-moz-transform: rotateY(60deg) translateZ(124px);
-webkit-transform: rotateY(60deg) translateZ(124px)}
.strip .f {background-position: 627px 0;
-moz-transform: rotateY(75deg) translateZ(124px);
-webkit-transform: rotateY(75deg) translateZ(124px)}
.strip .g {background-position: 594px 0;
-moz-transform: rotateY(90deg) translateZ(124px);
-webkit-transform: rotateY(90deg) translateZ(124px)}
.strip .h {background-position: 561px 0;
-moz-transform: rotateY(105deg) translateZ(124px);
-webkit-transform: rotateY(105deg) translateZ(124px)}
.strip .i {background-position: 528px 0;
-moz-transform: rotateY(120deg) translateZ(124px);
-webkit-transform: rotateY(120deg) translateZ(124px)}
.strip .j {background-position: 495px 0;
-moz-transform: rotateY(135deg) translateZ(124px);
-webkit-transform: rotateY(135deg) translateZ(124px)}
.strip .k {background-position: 462px 0;
-moz-transform: rotateY(150deg) translateZ(124px);
-webkit-transform: rotateY(150deg) translateZ(124px)}
.strip .l {background-position: 429px 0;
-moz-transform: rotateY(165deg) translateZ(124px);
-webkit-transform: rotateY(165deg) translateZ(124px)}
.strip .m {background-position: 396px 0;
-moz-transform: rotateY(180deg) translateZ(124px);
-webkit-transform: rotateY(180deg) translateZ(124px)}
.strip .n {background-position: 363px 0;
-moz-transform: rotateY(195deg) translateZ(124px);
-webkit-transform: rotateY(195deg) translateZ(124px)}
.strip .o {background-position: 330px 0;
-moz-transform: rotateY(210deg) translateZ(124px);
-webkit-transform: rotateY(210deg) translateZ(124px)}
.strip .p {background-position: 297px 0;
-moz-transform: rotateY(225deg) translateZ(124px);
-webkit-transform: rotateY(225deg) translateZ(124px)}
.strip .q {background-position: 264px 0;
-moz-transform: rotateY(240deg) translateZ(124px);
-webkit-transform: rotateY(240deg) translateZ(124px)}
.strip .r {background-position: 231px 0;
-moz-transform: rotateY(255deg) translateZ(124px);
-webkit-transform: rotateY(255deg) translateZ(124px)}
.strip .s {background-position: 198px 0;
-moz-transform: rotateY(270deg) translateZ(124px);
-webkit-transform: rotateY(270deg) translateZ(124px)}
.strip .t {background-position: 165px 0;
-moz-transform: rotateY(285deg) translateZ(124px);
-webkit-transform: rotateY(285deg) translateZ(124px)}
.strip .u {background-position: 132px 0;
-moz-transform: rotateY(300deg) translateZ(124px);
-webkit-transform: rotateY(300deg) translateZ(124px)}
.strip .v {background-position: 99px 0;
-moz-transform: rotateY(315deg) translateZ(124px);
-webkit-transform: rotateY(315deg) translateZ(124px)}
.strip .w {background-position: 66px 0;
-moz-transform: rotateY(330deg) translateZ(124px);
-webkit-transform: rotateY(330deg) translateZ(124px)}
.strip .x {background-position: 33px 0;
-moz-transform: rotateY(345deg) translateZ(124px);
-webkit-transform: rotateY(345deg) translateZ(124px)}
/*
@-moz-keyframes spin {
from { -moz-transform: rotateY(0)}
to { -moz-transform: rotateY(-360deg)}}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0)}
to { -webkit-transform: rotateY(-360deg)}}
*/
</style>
</head>
<body>
<div id="container">
<h1 style="position: absolute; z-index: 1000; -moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);color: white; font-family: 'Lato', sans-serif;font-size: 31px;font-weight:900;top: -165px;left: 69px;padding: 0;margin: 0"><?php echo $title; ?></h1>
<br /><br />
<div id="dose" style="z-index:100; -webkit-transform: translate3d(0px, 0px, 0px);-moz-transform: translate3d(0px,0px,0px);"><img src="dose-overlay-neu.png" /></div>
<div id="frame">
<div class="strip" style="-webkit-transform: rotateY(127deg)">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
<div class="n"></div>
<div class="o"></div>
<div class="p"></div>
<div class="q"></div>
<div class="r"></div>
<div class="s"></div>
<div class="t"></div>
<div class="u"></div>
<div class="v"></div>
<div class="w"></div>
<div class="x"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment