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);
}