Salom. CSS3 etganimday imkoniyatlari juda keng. Agar sarvar_uz ni maqolalarini o'qigan bo'lsangiz, maqolalarida har xil yangiliklar va imkoniyatlar haqida yozmoqda. Man bu safar CSS3 ning grafikasidan foydalanib uy yasashga harakat qildim.

Ochig'i o'zimni bilimim yetmagani sababli boshqa joydan CSS3 da oddiy kub yasashganini topdim va shu asosiyda uyni yasadim.
Bunda birinchi

#container {
	perspective: 1000px;
	perspective-origin: 50% 50%;
}

bu asosiy ko'rish nuqtasi. Qisqacha qilganda kamera.

Ikkinchi:

#home {
	...
	transform-style: preserve-3d;
	animation: spinningH 20s infinite linear;
}

bu uy obyektining chizish sohasi. Ya'ni modelview matrix vasifasida (OpenGL dagi).

Qolganlari uy devorlar, po'l va tomlarida. Buni joylashtirishda CSS3 ning rotate3d va translate3d funksiyalari ishlatilgan.

CSS kod:

#container {
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
}

@keyframes spinningH {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    transform: rotateX(0deg) rotateY(360deg);
  }
}

@-webkit-keyframes spinningH {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform: rotateX(0deg) rotateY(360deg);
  }
}


#home {
	position: relative;
	margin: 400px auto 0;
	height: 250px;
	width: 600px;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	animation: spinningH 20s infinite linear;
	-webkit-animation: spinningH 20s infinite linear;
}

#home > div {
	position: absolute;
	height: 250px;
	width: 600px;
}

#home > div.d {
	height: 250px;
	width: 400px;
}

#home > div.f {
	height: 400px;
	width: 600px;
}

#home div:nth-child(1) {
	transform: translateZ(200px);
	-webkit-transform: translateZ(200px);
	background: url(old.png) 0 0 no-repeat;
}

#home div:nth-child(2) {
	transform: rotateY(90deg) translateZ(400px);
	-webkit-transform: rotateY(90deg) translateZ(400px);
	background: #2D3A4D;
	background: url(devor.png) 0 0 repeat;
}

#home div:nth-child(3) {
	transform: rotateY(-90deg) translateZ(200px);
	-webkit-transform: rotateY(-90deg) translateZ(200px);
	background: url(devor.png) 0 0 repeat;
}

#home div:nth-child(4) {
	transform: rotateY(180deg) translateZ(200px);
	-webkit-transform: rotateY(180deg) translateZ(200px);
	background: url(old.png) 0 0 no-repeat;
}

#home div:nth-child(5) {
	transform: translateY(-178px) translateZ(108px) rotateX(60deg);
	-webkit-transform: translateY(-178px) translateZ(108px) rotateX(60deg);
	background: url(roof.jpg) 0 0 repeat;
}

#home div:nth-child(6) {
	transform: translateY(-178px) translateZ(-108px) rotateX(-60deg);
	-webkit-transform: translateY(-178px) translateZ(-108px) rotateX(-60deg);
	background: url(roof.jpg) 0 0 repeat;
}

#home div:nth-child(7) {
	transform: rotateX(-90deg) translateZ(50px);
	-webkit-transform: rotateX(-90deg) translateZ(50px);
	background: red;
}

Buni yasashda yana 3 rasmdan foydalanilgan.

Natijani ko'rish