Membuat Animasi Isometric Social Icon CSS

Sharing Teknologi – Membuat Animasi Isometric Social Icon HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Isometric Social Icon HTML CSS Di WordPress. 

CSS adalah singkatan dari Cascading Style Sheets, yang mana ada 3 versi: CSS1, CSS2 dan CSS3. CSS adalah aturan untuk mengelola banyak elemen pada halaman web agar lebih terstruktur dan konsisten.

CSS3 adalah versi terbaru dari CSS yang dapat melakukan banyak hal yang berkaitan dengan desain web. CSS3 memiliki kemampuan untuk membuat animasi warna menjadi animasi 3D pada halaman web.

CSS sangat membantu untuk meningkatkan tampilan dan nuansa halaman web seperti memberikan warna, bayangan kotak, padding, margin, perataan, posisi, dan efek pengetikan atau pengetikan. HTML (HyperText Markup Language) merupakan bahasa markup yang saat ini paling dominan dalam hal pembuatan website.

Dengan HTML, sebuah halaman web dapat dibuat sedemikian rupa sehingga menjadi lebih interaktif dan menarik. Karena HTML menggabungkan berbagai elemen seperti teks, multimedia, link, dan elemen pendukung lainnya menjadi satu kesatuan.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi Ikon Sosial Isometrik Menggunakan HTML CSS. 

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Isometric Social Icon

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

HTML

<div class="isometricicon position-relative px-3 py-5 my-1">
<div class="container">
	<div class="clip">
		<div class="twitter">
			<div class="front">
				<i class="fa fa-twitter" aria-hidden="true"></i>
			</div>
		</div>
		<div class="boxShadow"></div>
	</div>
	<div class="shadow"></div>
</div>
</div>

Style CSS

.isometricicon {
	min-height: 400px;
	background: rgb(128, 174, 233);
	background: radial-gradient(
		circle,
		rgba(128, 174, 233, 1) 0%,
		rgba(82, 146, 229, 1) 100%,
		rgba(0, 212, 255, 1) 100%
	);
	display: flex;
	justify-content: center;
	align-items: center;
}

.isometricicon .container {
	height: 50vh;
	width: 50vw;
	/* 	box-shadow: 0 0 15px rgba(128, 174, 233, 1),
		10px 10px 10px rgba(82, 146, 229, 0.5); */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	position: relative;
	perspective: 1000px;
	transition: 0.5s;
}

.isometricicon .twitter {
	background: #d2d6eb;
	width: 7vw;
	height: 7vw;

	font-size: 4vw;
	display: grid;
	place-items: center;

	position: relative;
	transform-style: preserve-3d;
	transition: 0.5s;
	transform: skewY(10deg);
	z-index: 9;
	box-shadow: 20px 30px 30px 0 #084fb6;

	animation: 1s animate linear infinite;
}

.isometricicon .twitter::before {
	content: "";
	position: absolute;
	background: #ece9eb;
	transition: 0.5s;

	top: -5px;
	left: 0px;
	width: 100%;
	height: 5px;
	transform-origin: bottom;
	transform: skewX(-45deg);
	border-radius: 10px 0px 0 0;
}

.isometricicon .twitter::after {
	content: "";
	position: absolute;
	background: #b5bbd9;
	transition: 0.5s;

	right: -5px;
	top: -5px;
	width: 5px;
	height: 100%;
	transform-origin: right;
	transform: skewY(-45deg);
	border-radius: 0 0 10px 0;
}

.isometricicon .clip:hover .twitter {
	transform: skewY(10deg) translateY(-40px);
	box-shadow: 10px 5px 20px 0 #084fb6;
	animation: none;
}

.isometricicon .front {
	backface-visibility: hidden;
}

.isometricicon .boxShadow {
	width: 7vw;
	height: 3vw;
	background: #d2d6eb;
	position: relative;
	top: -1px;
	transform-style: preserve-3d;
	transition: 0.5s;
	transform: skewY(10deg);
	z-index: 9;
	clip-path: polygon(0 0, 50% 100%, 100% 0);

	box-shadow: 10px 30px 30px 0 #084fb6;
	animation: 1s animate linear infinite;
}

.isometricicon .clip:hover .boxShadow {
	transform: skewY(10deg) translateY(-40px);
	box-shadow: none;
	animation: none;
}

.isometricicon .shadow {
	background: #1887e7;
	width: 12vw;
	height: 12vw;
	border-radius: 50%;
	margin-top: -50px;

	position: relative;
	transform-style: preserve-3d;
	transition: 0.5s;
	transform: rotatex(60deg);
	box-shadow: -2px 5px 1px 1px #2f94fb, 0 3px 0 1px #0263e3;
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.