Css galeri

Developer
Ayhan ALTINOK
Size
2,640 Kb
Views
30,360
  1. Css galeri Previews
  2. Css galeri HTML Codes
  3. Css galeri CSS Codes
  4. Css galeri JS Codes

How do I make an css galeri?

Css galeri. What is a css galeri? How do you make a css galeri? This script and codes were developed by Ayhan ALTINOK on 13 September 2022, Tuesday.

Css galeri Previews
IQ Test

Css galeri - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css galeri</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Css Galeri</h1> <div class="container">	<div id="galeri">	<figure><img src="http://www.egonomik.com/wallpaper/doga/egonomik.com-doga-wallpaper-06.jpg" alt="" width="220"></figure> <figure><img src="https://www.doga.com.tr/genelpanel/images/crop/images_18-05-2012-17_18_43.jpg" alt="" width="220"></figure> <figure><img src="http://www.cetsohbet.com/resimler/resim/doga-resimleri2.jpg" alt="" width="220"></figure> <figure><img src="http://www.kazanmakisteyenler.com/wp-content/uploads/2010/01/Amasya-doga-manzarasi.jpg" alt="" width="220"></figure> <figure><img src="http://www.kalbimcity.net/wp-content/uploads/2008/10/doga7.jpg" alt="" width="220"></figure> <figure><img src="http://www.resimler.eu/wp-content/gallery/doga-resimleri-1/doga-resmi-5.jpg" alt="" width="220"></figure> <figure><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTd7N-8f1D6eotfI4eRWETqmZcdv_3LT9AdvfW1xJeAryVCgFfRtw" alt="" width="220"></figure> <figure><img src="http://www.pdrmerkezi.com/wp-content/uploads/2012/04/5.jpg" alt="" width="220"></figure> <figure><img src="http://www.kozakli.tv/resim/doga-manzara-fotograflari-1-1506c594ec49a1.jpgf914d327a52f2a3365cb41f792537949.jpg" alt="" width="220"></figure>	</div>	</div> <script src="js/index.js"></script>
</body>
</html>

Css galeri - Script Codes CSS Codes

*{ margin: 0; padding: 0; outline: none; border: none;	box-sizing: border-box;
}
*:before,
*:after{	box-sizing: border-box;
}
html,
body{	min-height: 100%;
}
body{	background-image: radial-gradient(mintcream 0%, lightgray 100%);
}
h1{	display: table;	margin: 5% auto 0;	text-transform: uppercase;	font-family: arial;	font-size: 4em;	font-weight: 400;
}
.container{	margin: 4% auto;	width: 210px;	height: 140px;	position: relative;	perspective: 1000;
}
#galeri{	width: 100%;	height: 100%;	position: absolute;	transform-style: preserve-3d;	animation: rotation 20s infinite linear;
}
#galeri:hover{	animation-play-state: paused;
}
#galeri figure{	display: block;	position: absolute;	width: 186px;	height: 116px;	left: 10px;	top: 10px;	background: black;	overflow: hidden;	border: solid 5px black;
}
#galeri figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#galeri figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#galeri figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#galeri figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#galeri figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#galeri figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#galeri figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#galeri figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#galeri figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
img{	-webkit-filter: grayscale(1);	cursor: pointer;	transition: all .5s ease;
}
img:hover{	-webkit-filter: grayscale(0); transform: scale(1.2,1.2);
}
@keyframes rotation{	from{	transform: rotateY(0deg);	}	to{	transform: rotateY(360deg);	}
}

Css galeri - Script Codes JS Codes

/*------------İLETİŞİM BİLGİLERİ------------------
Ayhan ALTINOK - Copyright 2013
Facebook Adresim: www.facebook.com/AyhanALTINOKesk
Mail Adresim :[email protected]
------------------------------------------------*/
Css galeri - Script Codes
Css galeri - Script Codes
Home Page Home
Developer Ayhan ALTINOK
Username AyhanALTINOK
Uploaded September 13, 2022
Rating 3
Size 2,640 Kb
Views 30,360
Do you need developer help for Css galeri?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ayhan ALTINOK (AyhanALTINOK) Script Codes
Name
Slider
Css3 animasyon
Menu
Jquery Fare Animasyonu - Jquery Mouse Animation
Css sallanan resim efekti
Facebook Responsive Lightbox
Galeri efekti
A Pen by Ayhan ALTINOK
Filtre ile Arama Kutusu - Search Box with Filter
Akordion slayt -acordion slide
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!