Özgür Özer

Junior full stack developer

CSS ile Sanal Gerçeklik Animasyonu

Google Cardboard ile görüntülerin 3 boyutlu görülebilmesi konusu üzerine araştırmalar yaptığımda çok basit bir tekniği olduğunu farkettim. Stereoskopik görüntü denilen bu teknik, aslında aynı resmin farklı açılardan çekilmiş 2 farklı fotoğrafını yan yana getirip, beynimizi aldatarak, resmi 3 boyutluymuş gibi algılamamızı sağlayan bir illüzyondan fazlası değil. Sanal gerçeklik gözlükleri dışında çıplak gözle cross-eye yöntemi ile de yine aynı şekilde 3D görebiliyoruz.

Bugün CSS ile basit bir küp oluşturacak, açılarıyla oynayıp sanal gerçeklik gözlüğüyle baktığımızda beynimizin onu 3 boyutluymuş gibi algılamasını sağlayacağız.

İşe style.scss dosyamızı oluşturup, içine mixin.scss‘i dahil ettikten sonra ufak bir sıfırlama yaparak başlıyoruz.

@import "mixin";

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background-color: #95a5a6;
}

Sol ve sağ sahneyi oluşturup, sahnelerin ayrıldığı yeri gösteren bir çizgi çiziyoruz.

<div id="solSahne">
	<!-- küp -->
</div>
<div id="sagSahne">
	<!-- küp -->
</div>
#solSahne, #sagSahne {
	position: relative;
	float: left;
	width: 50%;
	height: 100%;
	&#sagSahne {
		margin-left: -1px;
		border-left: 1px solid #fff;
	}
}

Sahnelerin içine 6 kenardan oluşan küpümüzü yerleştirip preserve-3d ile küp kenarlarının 3 boyutlu görünmesini istediğimizi söylüyoruz.

<div class="kup">
	<div class="on"></div>
	<div class="arka"></div>
	<div class="ust"></div>
	<div class="alt"></div>
	<div class="sol"></div>
	<div class="sag"></div>
</div>
.kup {
	$genislikVeYukseklik: 250px;
	$marginLeftVeTop: -( $genislikVeYukseklik / 2 );
	$translateZ: $genislikVeYukseklik / 2;
	position: absolute;
	top: 50%;
	left: 50%;
	width: $genislikVeYukseklik;
	height: $genislikVeYukseklik;
	margin-top: $marginLeftVeTop;
	margin-left: $marginLeftVeTop;
	@include transform-style( preserve-3d );
	div {
		position: absolute;
		width: 100%;
		height: 100%;
		border: 1px solid #000;
		@include opacity( 85 );
	}
	.on {
		background-color: #1dd2af;
		@include transform( translateZ( $translateZ ) );
	}
	.arka {
		background-color: #2ecc71;
		@include transform( rotateY( 180deg ) translateZ( $translateZ ) );
	}
	.ust {
		background-color: #3498db;
		@include transform( rotateX( 90deg ) translateZ( $translateZ ) );
	}
	.alt {
		background-color: #9b59b6;
		@include transform( rotateX( -90deg ) translateZ( $translateZ ) );
	}
	.sol {
		background-color: #34495e;
		@include transform( rotateY( -90deg ) translateZ( $translateZ ) );
	}
	.sag {
		background-color: #e67e22;
		@include transform( rotateY( 90deg ) translateZ( $translateZ ) );
	}
}

Pek küpe benziyormuş gibi görünmüyor. Ama şimdi iki küp arasında açı farkı oluşturacak sihirli kodlarımızı yazıyoruz.

#solSahne {
	@include perspective-origin( -60% -50% );
}
#sagSahne {
	@include perspective-origin( -30% -50% );
}

Şimdi bir de küpümüze animasyon verelim.

.kup {
	@include animation( cevir 5s infinite linear );
}
@include keyframes( cevir ) {
	0% { @include transform( rotateX( 0 ) rotateY( 0 ) ); }
	100% { @include transform( rotateX( 360deg ) rotateY( 360deg ) ); }
}

Telefonumuzun tarayıcısından şu adresi açıp, Anroid’de ekrana bir kere dokunarak, iOS’te ise Safari’deyken telefonu yan yatırarak tam ekran moduna girip VR gözlüğümüzle küpün dönüşünü 3 boyutlu izleyebiliriz.

Çalışmayı Codepen üzerinden indirmek için tıklayın.

Açılarla oynayıp görsel yanılgı oluşturmak bu kadar basitti. perspective ve perspective-origin değerleriyle oynayarak daha düzgün ayarlamalar yapabiliriz.