Skip to content

Instantly share code, notes, and snippets.

@kevinkatzke

kevinkatzke/index.html

Created December 20, 2011 21:17
Show Gist options
  • Save kevinkatzke/1503321 to your computer and use it in GitHub Desktop.
Save kevinkatzke/1503321 to your computer and use it in GitHub Desktop.
Download ZIP
Change Football Team Logo and play around with CSS 3D Transformations
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS</title>
<style>
body, html{
-webkit-perspective: 800;
height:100%;
font:10px/12px Arial, sant serif;
background-image: url(stadium.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
#box{
width:200px;
height:200px;
position:absolute;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
left:50%;
top:50%;
margin: -100px 0 0 -100px;
background-size: 100%;
box-shadow:0 0 20px #3de;
border:1px solid #444;
}
#box img{
width:200px;
height:200px;
position:absolute;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
left:50%;
top:50%;
margin: -100px 0 0 -100px;
background-size: 100%;
box-shadow:0 0 20px #3de;
border:1px solid #444;
}
#verein{
position:fixed;
top:0;
right:50;
width:auto;
height: auto;
background-color: #0C0;
margin: 5px;
padding: 5px;
}
li:#verein {
font-size: 1.2em;
list-style-type: none;
text-decoration: none;
}
img:#verein li{
width:;
height:100px;
}
.controls{position:fixed; top:0; right:0; width:170px; background-color: #0C0; margin: 5px;}
label{width:100%; float:left; margin-bottom:10px; background-color: green;}
label span{width:100%; display:inline-block;}
</style>
</head>
<!--HTML5--->
<body>
<div id="box" style="-webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1)" contenteditable>
<img src="vereine/bundesliga.png" NAME="myImage"></div>
<div id="verein">
<!--<select name="test" onChange="getSelect()" id="getText">-->
<h2>Mein Verein</h2>
<br>
<li id="1" onClick="changeTeam()"><a href="#"><img src="vereine/icons/augsburg.png">FC Augsburg</a></li>
<li id="2" onClick="changeTeam1()"><a href="#"><img src="vereine/icons/hertha.png">Hertha BSC</a></li>
<li id="3" onClick="changeTeam2()"><a href="#"><img src="vereine/icons/bremen.png">Werder Bremen</a></li>
<li id="4" onClick="changeTeam3()"><a href="#"><img src="vereine/icons/dortmund.png">Borussia Dortmund</a></li>
<li id="5" onClick="changeTeam4()"><a href="#"><img src="vereine/icons/freiburg.png">SC Freiburg</a></li>
<li id="6" onClick="changeTeam5()"><a href="#"><img src="vereine/icons/hamburg.png">Hamburger SV</a></li>
<li id="7" onClick="changeTeam6()"><a href="#"><img src="vereine/icons/hannover.png">Hannover 96</a></li>
<li id="8" onClick="changeTeam7()"><a href="#"><img src="vereine/icons/hoffenheim.png">1899 Hoffenheim</a></li>
<li id="9" onClick="changeTeam8()"><a href="#"><img src="vereine/icons/fck.png">1.FC Kaiserslautern</a></li>
<li id="10" onClick="changeTeam9()"><a href="#"><img src="vereine/icons/köln.png">1.FC Köln</a></li>
<li id="11" onClick="changeTeam10()"><a href="#"><img src="vereine/icons/bayer.png">Bayer 04 Leverkusen</a></li>
<li id="12" onClick="changeTeam11()"><a href="#"><img src="vereine/icons/mainz.png">1.FSV Mainz 05</a></li>
<li id="13" onClick="changeTeam12()"><a href="#"><img src="vereine/icons/gladbach.png">Borussia Mönchengladbach</a></li>
<li id="14" onClick="changeTeam13()"><a href="#"><img src="vereine/icons/bayern.png">FC Bayern München</a></li>
<li id="15" onClick="changeTeam14()"><a href="#"><img src="vereine/icons/nürnberg.png">1.FC Nürnberg</a></li>
<li id="16" onClick="changeTeam15()"><a href="#"><img src="vereine/icons/schalke.png">FC Schalke 04</a></li>
<li id="17" onClick="changeTeam16()"><a href="#"><img src="vereine/icons/vfb.png">VfB Stuttgart</a></li>
<li id="18" onClick="changeTeam17()"><a href="#"><img src="vereine/icons/wolfsburg.png">VfL Wolfsburg</a></li>
</select>
<br>
<div id="reload" onClick="location.reload()"><button>Zurücksetzen</button></div>
</div>
<div class="controls">
<label><span>Translate X: </span><input id="x" type="range" value="0" min="-1000" max="1000" /><output>0</output></label>
<label><span>Translate Y: </span><input id="y" type="range" value="0" min="-1000" max="1000" /><output>0</output></label>
<label><span>Translate Z: </span><input id="z" type="range" value="0" min="-1000" max="1000" /><output>0</output></label>
<label><span>Rotate alpha: </span><input id="a" type="range" value="0" min="-360" max="360" /><output>0</output></label>
<label><span>Rotate beta: </span><input id="b" type="range" value="0" min="-360" max="360" /><output>0</output></label>
<label><span>Rotate Gama: </span><input id="w" type="range" value="0" min="-360" max="360" /><output>0</output></label>
<label><span>Scale: </span><input id="s" type="range" value="1" step="0.2" min="-5" max="10" /><output>1</output></label>
</div>
<!--JavaScript--->
<script>
for(var i = 0; i<document.querySelectorAll('input[type="range"]').length; i++){
document.querySelectorAll('input[type="range"]')[i].addEventListener('change', function(){
this.nextElementSibling.value = this.value;
var b = document.getElementById('box'),
val = this.value,
type = this.getAttribute('id'),
tr = b.style.WebkitTransform.split(' '),
trX = parseFloat(tr[0].substring(tr[0].indexOf('(')+1, tr[0].indexOf('p'))),
trY = parseFloat(tr[1].substr(0, tr[1].indexOf('p'))),
trZ = parseFloat(tr[2].substr(0, tr[2].indexOf('p'))),
trA = parseFloat(tr[3].substr(tr[3].indexOf('(')+1, tr[3].indexOf('d'))),
trB = parseFloat(tr[4].substr(tr[4].indexOf('(')+1, tr[4].indexOf('d'))),
trW = parseFloat(tr[5].substr(tr[5].indexOf('(')+1, tr[5].indexOf('d'))),
trS = parseFloat(tr[6].substr(tr[6].indexOf('(')+1, tr[6].indexOf(')')));
switch(type){
case 'x':
b.style.WebkitTransform ='translate3d(' + val + 'px, ' + trY + 'px, ' + trZ + 'px) ' + 'rotateX(' + trA + 'deg) ' + 'rotateY(' + trB + 'deg) ' + 'rotateZ(' + trW + 'deg) ' + 'scale(' + trS + ')';
break;
case 'y':
b.style.WebkitTransform ='translate3d(' + trX + 'px, ' + val + 'px, ' + trZ + 'px) ' + 'rotateX(' + trA + 'deg) ' + 'rotateY(' + trB + 'deg) ' + 'rotateZ(' + trW + 'deg)' + 'scale(' + trS + ')';
break;
case 'z':
b.style.WebkitTransform ='translate3d(' + trX + 'px, ' + trY + 'px, ' + val + 'px) ' + 'rotateX(' + trA + 'deg) ' + 'rotateY(' + trB + 'deg) ' + 'rotateZ(' + trW + 'deg)' + 'scale(' + trS + ')';
break;
case 'a':
b.style.WebkitTransform ='translate3d(' + trX + 'px, ' + trY + 'px, ' + trY + 'px) ' + 'rotateX(' + val + 'deg) ' + 'rotateY(' + trB + 'deg) ' + 'rotateZ(' + trW + 'deg)' + 'scale(' + trS + ')';
break;
case 'b':
b.style.WebkitTransform ='translate3d(' + trX + 'px, ' + trY + 'px, ' + trY + 'px) ' + 'rotateX(' + trA + 'deg) ' + 'rotateY(' + val + 'deg) ' + 'rotateZ(' + trW + 'deg)' + 'scale(' + trS + ')';
break;
case 'w':
b.style.WebkitTransform ='translate3d(' + trX + 'px, ' + trY + 'px, ' + trY + 'px) ' + 'rotateX(' + trA + 'deg) ' + 'rotateY(' + trB + 'deg) ' + 'rotateZ(' + val + 'deg)' + 'scale(' + trS + ')';
break;
case 's':
b.style.WebkitTransform ='translate3d(' + trX + 'px, ' + trY + 'px, ' + trY + 'px) ' + 'rotateX(' + trA + 'deg) ' + 'rotateY(' + trB + 'deg) ' + 'rotateZ(' + trW + 'deg)' + 'scale(' + val + ')';
break;
}
}, false);
}
<!--------------------------------------VereinChange---------------------------------------------->
var imageURL = "vereine/bundesliga.png";
if (document.images) {
var clock = new Image();
clock.src = "vereine/bayern.png";
var cup = new Image();
cup.src = "vereine/vflwolfsburg.png";
}
function changeTeam() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/augsburg.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam1() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/hertha.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam2() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/bremen.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam3() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/dortmund.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam4() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/freiburg.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam5() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/hamburg.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam6() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/hannover.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam7() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/hoffenheim.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam8() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/fck.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam9() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/köln.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam10() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/bayer.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam11() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/mainz.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam12() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/gladbach.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam13() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/bayern.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam14() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/nürnberg.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam15() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/schalke.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam16() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/vfb.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
function changeTeam17() {
if (document.images) {
if (1===1) imageURL = "vereine/icons/wolfsburg.png";
else imageURL = "vereine/bundesliga.png";
document.myImage.src = imageURL;
}
}
<!--------------------------------------/VereinChange---------------------------------------------->
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment