3D Transforms CSS Carousel

Developer
Chris Yaxley
Size
2,353 Kb
Views
10,120
  1. 3D Transforms CSS Carousel Previews
  2. 3D Transforms CSS Carousel HTML Codes
  3. 3D Transforms CSS Carousel CSS Codes
  4. 3D Transforms CSS Carousel JS Codes

How do I make an 3d transforms css carousel?

A experiment into createing a carousel using CSS transforms with 3D effects. What is a 3d transforms css carousel? How do you make a 3d transforms css carousel? This script and codes were developed by Chris Yaxley on 07 January 2023, Saturday.

3D Transforms CSS Carousel Previews
IQ Test

3D Transforms CSS Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Transforms CSS Carousel </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="fakePage"> <p>Currently this demo is Webkit only </p>	<div class="container">	<div id="carousel">	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image1.jpg" />	</figure>	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image2.jpg" />	</figure>	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image3.jpg" />	</figure>	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image4.jpg" />	</figure>	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image5.jpg" />	</figure>	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image6.jpg" />	</figure>	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image7.jpg" />	</figure>	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image8.jpg" />	</figure>	<figure class="carouselImage">	<img src="https://tech.chrisyaxley.co.uk/images/carousel/image9.jpg" />	</figure>	</div>	</div>	<div id="controls">	<button id="prev">Prev</button>	<button id="next">Next</button>	</div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Transforms CSS Carousel - Script Codes CSS Codes

.fakePage{	width: 600px;	margin: 50px auto;
}
.container { width: 100%; height: 140px; position: relative; -webkit-perspective: 2450px; margin: 0 auto 40px;
}
#carousel { width: 100%;	height: 100%;	position: absolute;	-webkit-transform-style: preserve-3d;	-webkit-transform: translateZ(288px);	-webkit-transition: -webkit-transform 1s;	-webkit-perspective-origin: center center;	-webkit-transform-origin: 12% 0%;	left:280px;
}
#carousel .playing{	-webkit-animation-name: 'rotateCarousel';
}
#carousel figure {	display: block;	position: absolute;	-webkit-transition: -webkit-transform 1s;	margin:auto;
}
#carousel figure img{
}
#controls{	padding:10px;
}
@-webkit-keyframes 'rotateCarousel' {	0% {	-webkit-transform: rotateY(0deg);	}	100% {	-webkit-transform: rotateY(360deg);	}
}

3D Transforms CSS Carousel - Script Codes JS Codes

var amountOfImages = ($('.carouselImage').length);	var i = 360 / amountOfImages;	var rotateY = i;	var translateZ = 32 * amountOfImages;	$('.carouselImage').each(function() {	$(this).css( '-webkit-transform', 'rotateY('+ rotateY +'deg) translateZ('+ translateZ +'px)');	rotateY = rotateY + i;	});	$('#carousel').css('-webkit-transform','rotateY('+ i + 'deg)');	$('#next').click(function() {	i = i-40;	$('#carousel').css('-webkit-transform','rotateY('+ i + 'deg)');	});	$('#prev').click(function() {	i = i+40;	$('#carousel').css('-webkit-transform','rotateY('+ i + 'deg)');	});
3D Transforms CSS Carousel - Script Codes
3D Transforms CSS Carousel - Script Codes
Home Page Home
Developer Chris Yaxley
Username chrisyaxley
Uploaded January 07, 2023
Rating 3.5
Size 2,353 Kb
Views 10,120
Do you need developer help for 3D Transforms CSS Carousel?

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!

Chris Yaxley (chrisyaxley) Script Codes
Name
No-JS Tool tips
Google style image preview
Quick PostCodes.io test
Some modern CSS techniques
Responsive Calender view
SVG Logo with CSS animations
Accessible custom CSS only Radio buttons
Basic Mario Keyframes animation
Social Share Sprite using SASS Each
A Pen by Chris Yaxley
Create amazing love letters 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!