Created
December 20, 2011 21:17
-
-
Save kevinkatzke/1503321 to your computer and use it in GitHub Desktop.
Change Football Team Logo and play around with CSS 3D Transformations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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