• 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
79 wizyt
pytanie zadane 29 stycznia w Nasze projekty przez MrxCI Dyskutant (8,290 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 (72,120 p.)

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

komentarz 29 stycznia przez MrxCI Dyskutant (8,290 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 (29,170 p.)
Ło matko a po co to haśliłeś?
komentarz 29 stycznia przez MrxCI Dyskutant (8,290 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ź 234 wizyt
pytanie zadane 16 lipca 2018 w Nasze projekty przez MrxCI Dyskutant (8,290 p.)
+1 głos
4 odpowiedzi 106 wizyt
+2 głosów
11 odpowiedzi 464 wizyt
pytanie zadane 1 czerwca 2015 w Nasze projekty przez Dany Obywatel (1,370 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

65,641 zapytań

112,265 odpowiedzi

236,884 komentarzy

46,639 pasjonatów

Przeglądających: 146
Pasjonatów: 8 Gości: 138

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.

...