• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Mały projekt głównie w CSS - zabawa z 3d

0 głosów
62 wizyt
pytanie zadane 29 stycznia w Nasze projekty przez MrxCI Mądrala (5,960 p.)
edycja 30 stycznia przez MrxCI

Przerobiłem obrazek z 2d na coś al'a 3d w głównie w css, kod jest dostępny w źródle jak zawsze.

Live (przez tunelowanie):

 

No-live (download, jak powyższy nie dziala)

pass to rar: L:PE$^rt:PL$

link:https://bit.ly/2GcVyuL

Zastanawiam się nad dalszym kombinowaniem tego typu w css i tworzeniu innych prac, oraz wgrywaniu modeli z blendera poprzez three.js.

Prosiłbym o ocenę tego małego kodu i wyglądu wizualnie :)

 

//edit

 

/*
   All rights reserved
*/


body{
background-color:black;
margin:0;
padding:0;

display:flex;
justify-content:center;
align-items:center;
overflow-y:hidden;
overflow-x:hidden;
}

a{
text-decoration:none;
position:absolute;
top:0;
}
.container{
width:800px;
height:450px;
transform: perspective(1000px);
transform-style: preserve-3d;


display:flex;
justify-content:center;
align-items:center;
}


.text{
position:absolute;
top:50px;
color:white;
transform: translateZ(150px);
animation: text 5s infinite ease-in-out;
color:cyan;
}

@keyframes text {
  0% {
	transform: translateZ(150px) rotateY(20deg) rotateX(20deg);
  }
  
   50% {
	transform: translateZ(130px) rotateY(-20deg) rotateX(-20deg);
	color:lightblue;
  }
  
  100% {
	transform: translateZ(150px) rotateY(20deg) rotateX(20deg);
  }

}


.head{
position:absolute;
bottom:0px;
width:500px;
height:400px;
background-image: url('head.png');
background-size:100% 100%;
}

.neck{
position:absolute;
bottom:-60px;
width:400px;
height:300px;
background-image: url('neck.png');
background-size:100% 100%;
transform: translateZ(-15px);
}

.earl{
position:absolute;
bottom:35px;
left:-100px;
width:650px;
height:319px;
background-image: url('earl.png');
background-size:100% 100%;
transform: translateZ(-110px) rotateY(-40deg);
animation: earl 3s infinite ease-in-out;
}

@keyframes earl {
  0% {
	transform: translateZ(-110px) rotateY(-40deg);
  }
  
   50% {
	transform: translateZ(-110px) rotateY(-40deg) rotateZ(-5deg) translateY(20px);
  }
  
  100% {
	transform: translateZ(-110px) rotateY(-40deg);
  }

}


.earr{
position:absolute;
bottom:35px;
right:-100px;
width:650px;
height:319px;
background-image: url('earr.png');
background-size:100% 100%;
transform: translateZ(-110px) rotateY(40deg);
animation: earr 3s infinite ease-in-out;
}

@keyframes earr {
  0% {
	transform: translateZ(-110px) rotateY(40deg);
  }
  
   50% {
	transform: translateZ(-110px) rotateY(40deg) rotateZ(5deg) translateY(20px);
  }
  
  100% {
	transform: translateZ(-110px) rotateY(40deg);
  }

}
.nose{
position:absolute;
bottom:25px;
left:230px;
width:300px;
height:250px;
background-image: url('nose.png');
background-size:100% 100%;
transform: translateZ(7px) rotateX(5deg) rotateY(5deg);

}

.jawdown{
position:absolute;
bottom:5px;
left:290px;
width:210px;
height:200px;
background-image: url('jawdown.png');
background-size:100% 100%;
transform: translateZ(5px) rotateX(0deg);
animation: jaw 7s infinite ease-in-out;
transition:1s;
}


@keyframes jaw {
  0% {
	transform: translateZ(5px) rotateX(0deg);
  }
  50% {
	transform: translateZ(5px) rotateX(0deg) translateY(5px) rotate(2deg);
  }
  
  100% {
	transform: translateZ(5px) rotateX(0deg);
  }
}

.tooth1{
position:absolute;
bottom:50px;
left:390px;
width:50px;
height:100px;
background-image: url('tooth1.png');
background-size:100% 100%;
transform: translateZ(10px) rotateX(15deg);
}

.tooth2{
position:absolute;
bottom:50px;
left:325px;
width:50px;
height:100px;
background-image: url('tooth1.png');
background-size:100% 100%;
transform: translateZ(12px) rotateX(15deg);
}

.face{
position:absolute;
bottom:180px;
left:315px;
width:150px;
height:100px;
background-image: url('face.png');
background-size:100% 100%;
transform: translateZ(0px);	
}

.hairback{
position:absolute;
bottom:-100px;
left:5px;
width: 750px;
height:600px;
background-image: url('hairback.png');
background-size:100% 100%;
transform: translateZ(-10px) rotateX(-5deg);	
}

.hairr{
position:absolute;
bottom:-50px;
left:325px;
width:300px;
height:460px;
background-image: url('hairr.png');
background-size:100% 100%;
transform: translateZ(-4px) rotateX(3deg);	
}

.hairl{
position:absolute;
bottom:-60px;
left:165px;
width:300px;
height:460px;
background-image: url('hairl.png');
background-size:100% 100%;
transform: translateZ(-2px) rotateX(1deg);	
}

.hairup{
position:absolute;
bottom:130px;
left:165px;
width:400px;
height:300px;
background-image: url('hairup.png');
background-size:100% 100%;
transform: translateZ(5px) rotateY(2deg);	
}

.hairmid{
position:absolute;
bottom:130px;
left:215px;
width:270px;
height:190px;
background-image: url('hairmid.png');
background-size:100% 100%;
transform: translateZ(10px) rotateY(4deg);	
}

.hairdown{
position:absolute;
bottom:80px;
left:185px;
width:400px;
height:300px;
background-image: url('hairdown.png');
background-size:100% 100%;
transform: translateZ(15px) rotateY(9deg);	
}



 

komentarz 29 stycznia przez Benek Maniak (67,100 p.)

Umieść to normalnie, kod źródłowy jawnie, np. tutaj.

komentarz 29 stycznia przez MrxCI Mądrala (5,960 p.)
Glownie chodzi o wizualizacje, a projekt ma mnóstwo grafik, jak wroce z pracy po 18 wlacze tunel
komentarz 29 stycznia przez manjaro Nałogowiec (27,980 p.)
Ło matko a po co to haśliłeś?
komentarz 29 stycznia przez MrxCI Mądrala (5,960 p.)
Zły nawyk sprzed wielu lat :s

 

tunelowanie juz dziala ^^

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 231 wizyt
pytanie zadane 16 lipca 2018 w Nasze projekty przez MrxCI Mądrala (5,960 p.)
+1 głos
4 odpowiedzi 102 wizyt
+2 głosów
11 odpowiedzi 444 wizyt
pytanie zadane 1 czerwca 2015 w Nasze projekty przez Dany Obywatel (1,370 p.)
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

60,253 zapytań

105,938 odpowiedzi

220,099 komentarzy

32,461 pasjonatów

Przeglądających: 327
Pasjonatów: 19 Gości: 308

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...