work@lienusowl.ru

Полное портфолио: zsws.ru

Слайдер 3D на css3

Готовый не сложный слайдер с небольшим эффектом 3д смены слайдов, что примечательно слайдер реализован исключительно на css3.

Напишу сразу весь код чтобы можно было просто брать и копировать:

html структура будет выглядеть так:


    
Hey, you! Get offa my cloud! (30 Mar) You were always on my mind.. (2 Jun) You know you could have it so much better, if you tried.. (5 Aug) Every single night, I endure the fight.. (8 Oct) Last night these two bouncers and one of them's alright.. (20 Dec)

Стили которые нужно будет написать для слайдера:


    #slider {
    display: block;
    height: 350px;
    width: 100%;
    margin: auto;
    overflow: hidden;
    margin-top: 60px;
    position: relative;
}

#slider #slides {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#slider #slides > div {
    list-style: none;
    height: 100%;
    width: 500%;
    position: relative;
    left: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Set 3D perspective since we're using 3D transforms */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 600px; 
    -moz-perspective: 600px; 
    perspective: 600px;
    -webkit-perspective-origin: 10% 50%; 
    -moz-perspective-origin: 10% 50%; 
    perspective-origin: 10% 50%;
}

#slides > div > span {
	/* Run the tranistions */
	-webkit-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
	-moz-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
	-o-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
	transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
	height: 320px;
	width: 10%;
	float: left;
	border-radius: 5px;
	opacity: 1;
	overflow: hidden;
	display: block;
	position: relative;
	font-size: 1.6em;
	top: 20px;
	z-index: 1;
}

/* Display none, so the user doesn't see whats happening with the radio buttons */
#slider input[type=radio] {
	display: none;
}

#slider #slides > div > span > img {
    margin: auto;
    height: 100%;
}

/* Style the arrows so they look nice! */
#slider .arrows {
    font-size: 15px;
    color: #fff;
    position: absolute;
    top: 290px;
    display: none;
    cursor: pointer;
    font-family: Arial, sans-serif;
    z-index: 9999;
    width: 29px;
	height: 25px;
	border-radius: 32px;
	text-align: center;
	padding: 7px 0 0 3px;
    background: black;
    box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px 11px 24px -8px rgba(255,255,255,0.4);
}

#slider .arrows:hover {
	box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px -11px 24px -8px rgba(255,255,255,0.4);	
}

/* The info boxes */
#slides .info {
	width: 100%;
	padding: 20px 20px 25px 20px;
	position: relative;
	bottom: 120px;
	border-radius: 5px 5px 0 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: block;
	-webkit-transition: all 1s 0.2s cubic-bezier(1, 0, 0.6, 1);
	transition: all 1s 0.2s cubic-bezier(1, 0, 0.6, 1);
	color: #fff;
	font-weight: bold;
	background-color: rgb(30, 30, 30);
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	line-height: 30px;
}

#slides .info strong {
	border-bottom: 2px solid #fff;
	padding: 3px 0;
}

#slides .info em {
	font-size: 0.8em;
	float: right;
	padding-top: 4px;
	color: rgba(255,255,255,0.2);
}

/* This is for positioning the arrows */
#button-1:checked ~ #arrow-2, #button-2:checked ~ #arrow-3, #button-3:checked ~ #arrow-4, #button-4:checked ~ #arrow-5 {
    right: 27%;
    display: block;
}

/* Since there is no previous sibling selector in CSS, we have to select the correct arrow, reposition it and rotate it 180deg so it appears as though it's a back arrow */
#button-2:checked ~ #arrow-1, #button-3:checked ~ #arrow-2, #button-4:checked ~ #arrow-3, #button-5:checked ~ #arrow-4 {
	left: 27%;
    display: block;
    -webkit-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px -11px 24px -8px rgba(255,255,255,0.4);
}

#button-2:checked ~ #arrow-1:hover, #button-3:checked ~ #arrow-2:hover, #button-4:checked ~ #arrow-3:hover, #button-5:checked ~ #arrow-4:hover {
    box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px 11px 24px -8px rgba(255,255,255,0.4);
}

/* The images used in the slides, feel free to change this */
#image-1 {
	background: url('1.jpg');
}

#image-2 {
	background: url('2.jpg');
}

#image-3 {
	background: url('3.jpg');
}

#image-4 {
	background: url('4.jpg');
}

#image-5 {
	background: url('5.jpg');
}

/* The next bit is a bit wordy, but it just positions the slides at either side of the selected slide 
   so we get a cool 3D effect */
#slider #button-1:checked ~ #slides > div #image-2, #slider #button-1:checked ~ #slides > div #image-3, 
#slider #button-1:checked ~ #slides > div #image-4, #slider #button-1:checked ~ #slides > div #image-5,
#slider #button-2:checked ~ #slides > div #image-3, #slider #button-2:checked ~ #slides > div #image-4, 
#slider #button-2:checked ~ #slides > div #image-5, #slider #button-3:checked ~ #slides > div #image-4,
#slider #button-3:checked ~ #slides > div #image-5, #slider #button-4:checked ~ #slides > div #image-5 {
	-webkit-transform: rotateY(-10deg) scale(0.8) translateX(-10%);
	transform: rotateY(-10deg) scale(0.8) translateX(-10%);
	z-index: 0;
}

#slider #button-2:checked ~ #slides > div #image-1, #slider #button-3:checked ~ #slides > div #image-2,
#slider #button-3:checked ~ #slides > div #image-1, #slider #button-4:checked ~ #slides > div #image-3, 
#slider #button-4:checked ~ #slides > div #image-2, #slider #button-4:checked ~ #slides > div #image-1, 
#slider #button-5:checked ~ #slides > div #image-4, #slider #button-5:checked ~ #slides > div #image-3,
#slider #button-5:checked ~ #slides > div #image-2, #slider #button-5:checked ~ #slides > div #image-1 {
	-webkit-transform: rotateY(10deg) scale(0.8) translateX(10%);
	transform: rotateY(10deg) scale(0.8) translateX(10%);
	z-index: 0;
}

/* Show the info box when the user selects the slides */
#slider #button-1:checked ~ #slides > div #image-1 .info, 
#slider #button-2:checked ~ #slides > div #image-2 .info,  
#slider #button-3:checked ~ #slides > div #image-3 .info,
#slider #button-4:checked ~ #slides > div #image-4 .info, 
#slider #button-5:checked ~ #slides > div #image-5 .info {
	bottom: 0px;
}

/* .. and finally, move the slides into the correct position when the user clicks the arrow, so the right
   slide is selected */

#slider #button-1:checked ~ #slides > div > span { left: 5% }

#slider #button-2:checked ~ #slides > div > span { left: -5% }

#slider #button-3:checked ~ #slides > div > span { left: -15% }

#slider #button-4:checked ~ #slides > div > span { left: -25% }

#slider #button-5:checked ~ #slides > div > span { left: -35% }

/* ================ IGNORE ================ */

#header {
	width: 100%;
	line-height: 30px;
	margin: 50px auto;
	text-align: center;
}

#header h1 {
	color: #ea664c;
	font-weight: bold;
	font-size: 4em;
}

#header p {
	font-size: 2em;
}

#travel {
	padding: 10px;
	background: rgba(0,0,0,0.6);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	font-variant: normal;
	text-decoration: none;
	font-size: 1.5em;
}

#travel a {
	font-family: 'Georgia', serif;
	text-decoration: none;
	border-bottom: 1px solid #f9f9f9;
	color: #f9f9f9;
}
    

Пример работы

Hey, you! Get offa my cloud! (30 Mar) You were always on my mind.. (2 Jun) You know you could have it so much better, if you tried.. (5 Aug) Every single night, I endure the fight.. (8 Oct) Last night these two bouncers and one of them's alright.. (20 Dec)