• 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

VPS Starter Arubacloud
0 głosów
181 wizyt
pytanie zadane 29 stycznia 2019 w Nasze projekty przez MrxCI Dyskutant (8,260 p.)
edycja 30 stycznia 2019 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 2019 przez Benek Szeryf (90,690 p.)

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

komentarz 29 stycznia 2019 przez MrxCI Dyskutant (8,260 p.)
Glownie chodzi o wizualizacje, a projekt ma mnóstwo grafik, jak wroce z pracy po 18 wlacze tunel
komentarz 29 stycznia 2019 przez manjaro Nałogowiec (37,390 p.)
Ło matko a po co to haśliłeś?
komentarz 29 stycznia 2019 przez MrxCI Dyskutant (8,260 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ź 428 wizyt
pytanie zadane 16 lipca 2018 w Nasze projekty przez MrxCI Dyskutant (8,260 p.)
+1 głos
4 odpowiedzi 165 wizyt

92,452 zapytań

141,262 odpowiedzi

319,078 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...