3d Carousel Effect
Here at Stack Overflow we love Carousels!
Sources found here
There are so many carousels we can choose from and they can all be made slightly differently. Some use Javascript, others just pure css. And since there are so many to choose from, here's just a few different samples. Please note, however, I am leaving it up to you to ask any clarification questions on 'how they work' if need be, as explaining each and every one would become repetitive, with some minor differences. Some also include precompilers (i.e LESS or SASS in order to work correctly):
quick sample 1
body { background: #eee; font-family: arial, helvetica, sans-serif; margin: 50px auto; padding: 0;}
h1 { font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif; font-size: 36px; text-align: center;}h3 { font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif; font-size: 22px; font-style: italic; color: #4e4e4e; text-align: center; margin-bottom: -100px;}
#wrapper { width: 960px; margin: 0 auto;}
#wrapper { perspective: 2500; -webkit-perspective: 2500; width: 800px; margin: 200px auto 0 auto; perspective-origin: 50% 150px; -webkit-perspective-origin: 50% 150px; transition: perspective, 1s; -o-transition: -o-perspective, 1s; -moz-transition: -moz-perspective, 1s; -webkit-transition: -webkit-perspective, 1s;}
#image:hover { animation-play-state:paused; -o-animation-play-state:paused; -moz-animation-play-state:paused; -webkit-animation-play-state:paused;}
@-webkit-keyframes spin { from { transform: rotateY(0); -o-transform: rotateY(0); -ms-transform: rotateY(0); -moz-transform: rotateY(0); -webkit-transform: rotateY(0); } to { transform: rotateY(-360deg); -o-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -webkit-transform: rotateY(-360deg); }}
#image { margin: 0 auto; height: 300px; width: 400px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: spin 24s infinite linear; -moz-animation: spin 24s infinite linear; -o-animation: spin 24s infinite linear; -webkit-animation: spin 24s infinite linear;}
.image { position: absolute; height: 300px; width: 400px; border-radius: 25px; background-color: rgba(0,0,0,0.6); text-align: center; font-size: 20em; color: #fff;}
#image > .i1 { transform: translateZ(485px); -moz-transform: translateZ(485px); -o-transform: translateZ(485px); -ms-transform: translateZ(485px); -webkit-transform: translateZ(485px);}#image > .i2 { transform: rotateY(45deg) translateZ(485px); -moz-transform: rotateY(45deg) translateZ(485px); -o-transform: rotateY(45deg) translateZ(485px); -ms-transform: rotateY(45deg) translateZ(485px); -webkit-transform: rotateY(45deg) translateZ(485px);}#image > .i3 { transform: rotateY(90deg) translateZ(485px); -moz-transform: rotateY(90deg) translateZ(485px); -o-transform: rotateY(90deg) translateZ(485px); -ms-transform: rotateY(90deg) translateZ(485px); -webkit-transform: rotateY(90deg) translateZ(485px);}#image > .i4 { transform: rotateY(135deg) translateZ(485px); -moz-transform: rotateY(135deg) translateZ(485px); -o-transform: rotateY(135deg) translateZ(485px); -ms-transform: rotateY(135deg) translateZ(485px); -webkit-transform: rotateY(135deg) translateZ(485px);}#image > .i5 { transform: rotateY(180deg) translateZ(485px); -moz-transform: rotateY(180deg) translateZ(485px); -o-transform: rotateY(180deg) translateZ(485px); -ms-transform: rotateY(180deg) translateZ(485px); -webkit-transform: rotateY(180deg) translateZ(485px);}#image > .i6 { transform: rotateY(225deg) translateZ(485px); -moz-transform: rotateY(225deg) translateZ(485px); -o-transform: rotateY(225deg) translateZ(485px); -ms-transform: rotateY(225deg) translateZ(485px); -webkit-transform: rotateY(225deg) translateZ(485px);}#image > .i7 { transform: rotateY(270deg) translateZ(485px); -moz-transform: rotateY(270deg) translateZ(485px); -o-transform: rotateY(270deg) translateZ(485px); -ms-transform: rotateY(270deg) translateZ(485px); -webkit-transform: rotateY(270deg) translateZ(485px);}#image > .i8 { transform: rotateY(315deg) translateZ(485px); -moz-transform: rotateY(315deg) translateZ(485px); -o-transform: rotateY(315deg) translateZ(485px); -ms-transform: rotateY(315deg) translateZ(485px); -webkit-transform: rotateY(315deg) translateZ(485px);}
img { border-radius: 25px;<body> <h1>View in Chrome or Safari</h1> <h3>(hover over to pause)</h3> <div id="wrapper"> <div id="image"> <div class="image i1"><img src="https://dl.dropbox.com/u/80409395/Codepen/Noe-in-leaves.jpg"></div> <div class="image i2"><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-sitting.jpg"></div> <div class="image i3"><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-noodles.jpg"></div> <div class="image i4"><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-smiling.jpg"></div> <div class="image i5"><img src="https://dl.dropbox.com/u/80409395/Codepen/Girls-in-leaves.jpg"></div> <div class="image i6"><img src="https://dl.dropbox.com/u/80409395/Codepen/Natalie-smiling.jpg"></div> <div class="image i7"><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-sleeping.jpg"></div> <div class="image i8"><img src="https://dl.dropbox.com/u/80409395/Codepen/Sledding.jpg"></div> </div> </div></body>3D Carousel Animation in Flutter
I made a quick demo for you, tweak the Matrix4 params.
(blur/depth of field doesn't work well on browser).
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
darkTheme:
ThemeData(platform: TargetPlatform.iOS, brightness: Brightness.dark),
home: RotationScene(),
);
}
}
class RotationScene extends StatefulWidget {
@override
_RotationSceneState createState() => _RotationSceneState();
}
class _RotationSceneState extends State<RotationScene> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'carrousel',
style: TextStyle(fontSize: 13),
),
centerTitle: false,
elevation: 12,
backgroundColor: Colors.transparent,
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xff74ABE4), Color(0xffA892ED)],
stops: [0, 1],
)),
child: Center(child: MyScener()),
),
);
}
}
class CardData {
Color color;
double x, y, z, angle;
final int idx;
double alpha = 0;
Color get lightColor {
var val = HSVColor.fromColor(color);
return val.withSaturation(.5).withValue(.8).toColor();
}
CardData(this.idx) {
color = Colors.primaries[idx % Colors.primaries.length];
x = 0;
y = 0;
z = 0;
}
}
class MyScener extends StatefulWidget {
@override
_MyScenerState createState() => _MyScenerState();
}
class _MyScenerState extends State<MyScener>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
List<CardData> cardData = [];
int numItems = 9;
double radio = 200.0;
double radioStep;
int centerIdx = 1;
@override
void initState() {
cardData = List.generate(numItems, (index) => CardData(index)).toList();
radioStep = (pi * 2) / numItems;
_animationController =
AnimationController(vsync: this, duration: Duration(seconds: 1));
_animationController.addListener(() => setState(() {}));
_animationController.addStatusListener((status) async {
if (status == AnimationStatus.completed) {
_animationController.value = 0;
_animationController.animateTo(1);
++centerIdx;
}
});
_animationController.forward();
super.initState();
}
@override
Widget build(BuildContext context) {
var ratio = _animationController.value;
double animValue = centerIdx + ratio;
// process positions.
for (var i = 0; i < cardData.length; ++i) {
var c = cardData[i];
double ang = c.idx * radioStep + animValue;
c.angle = ang + pi / 2;
c.x = cos(ang) * radio;
// c.y = sin(ang) * 10;
c.z = sin(ang) * radio;
}
// sort in Z axis.
cardData.sort((a, b) => a.z.compareTo(b.z));
var list = cardData.map((vo) {
var c = addCard(vo);
var mt2 = Matrix4.identity();
mt2.setEntry(3, 2, 0.001);
mt2.translate(vo.x, vo.y, -vo.z);
mt2.rotateY(vo.angle + pi);
c = Transform(
alignment: Alignment.center,
origin: Offset(0.0, -0.0),
transform: mt2,
child: c,
);
// depth of field... doesnt work on web.
// var blur = .4 + ((1 - vo.z / radio) / 2) * 2;
// c = BackdropFilter(
// filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
// child: c,
// );
return c;
}).toList();
return Container(
alignment: Alignment.center,
child: Stack(
alignment: Alignment.center,
children: list,
),
);
}
Widget addCard(CardData vo) {
var alpha = ((1 - vo.z / radio) / 2) * .6;
Widget c;
c = Container(
margin: EdgeInsets.all(12),
width: 120,
height: 80,
alignment: Alignment.center,
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.black.withOpacity(alpha),
),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.1, .9],
colors: [vo.lightColor, vo.color],
),
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.2 + alpha * .2),
spreadRadius: 1,
blurRadius: 12,
offset: Offset(0, 2))
],
),
child: Text('ITEM ${vo.idx}'),
);
return c;
}
}
CSS 3D Carousel Item Rotation
I have created a wrapper for every element, that keeps the element unrotated, but in the wheel position.
And then, in the javascript, I counter rotate the elements, to keep then facing to the viewer
var carousel = $(".carousel"), items = $(".item"), currdeg = 0;
$(".next").on("click", { d: "n" }, rotate);$(".prev").on("click", { d: "p" }, rotate);
function rotate(e){ if(e.data.d=="n"){ currdeg = currdeg - 60; } if(e.data.d=="p"){ currdeg = currdeg + 60; } carousel.css({ "-webkit-transform": "rotateY("+currdeg+"deg)", "-moz-transform": "rotateY("+currdeg+"deg)", "-o-transform": "rotateY("+currdeg+"deg)", "transform": "rotateY("+currdeg+"deg)" }); items.css({ "-webkit-transform": "rotateY("+(-currdeg)+"deg)", "-moz-transform": "rotateY("+(-currdeg)+"deg)", "-o-transform": "rotateY("+(-currdeg)+"deg)", "transform": "rotateY("+(-currdeg)+"deg)" });}body { background: #333; padding: 70px 0; font: 15px/20px Arial, sans-serif;}
.container { margin: 0 auto; width: 250px; height: 200px; position: relative; perspective: 1000px;}
.carousel { height: 100%; width: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s;}.carousel div { transform-style: preserve-3d; }
.item { display: block; position: absolute; background: #000; width: 250px; height: 200px; line-height: 200px; font-size: 5em; text-align: center; color: #FFF; opacity: 0.95; border-radius: 10px; transition: transform 1s;}
.a { transform: rotateY(0deg) translateZ(250px);}.a .item { background: #ed1c24;}.b { transform: rotateY(60deg) translateZ(250px) rotateY(-60deg);}.b .item { background: #0072bc;}.c { transform: rotateY(120deg) translateZ(250px) rotateY(-120deg);}.c .item { background: #39b54a;}.d { transform: rotateY(180deg) translateZ(250px) rotateY(-180deg);}.d .item { background: #f26522;}.e { transform: rotateY(240deg) translateZ(250px) rotateY(-240deg);} .e .item { background: #630460;}.f { transform: rotateY(300deg) translateZ(250px) rotateY(-300deg);}.f .item { background: #8c6239;}
.next, .prev { color: #444; position: absolute; top: 100px; padding: 1em 2em; cursor: pointer; background: #CCC; border-radius: 5px; border-top: 1px solid #FFF; box-shadow: 0 5px 0 #999; transition: box-shadow 0.1s, top 0.1s;}.next:hover, .prev:hover { color: #000; }.next:active, .prev:active { top: 104px; box-shadow: 0 1px 0 #999;}.next { right: 5em; }.prev { left: 5em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container"> <div class="carousel"> <div class="a"> <div class="item">A</div> </div> <div class="b"> <div class="item">B</div> </div> <div class="c"> <div class="item">C</div> </div> <div class="d"> <div class="item">D</div> </div> <div class="e"> <div class="item">E</div> </div> <div class="f"> <div class="item">F</div> </div> </div></div><div class="next">Next</div><div class="prev">Prev</div>Related Topics
How to Use <Section> and <Article> Tags in HTML5
How to Put Img Inline with Text
Difference Between Applying CSS Rules to HTML Compared to Body
How to Use CSS Vars in CSS3 Selectors
Is Any Way That Is Safe to Display Videos in a Browser
How to Resolve 500 Internal Server Error
Style a Checkbox in Firefox - Remove Check and Border
Is It Possible Put Image in Input Type="Check Box"
Zoom Changes The Design Layout
Transition for Background-Image in Firefox
Difference Between Classes and Ids in CSS? Explain with Example of Where to Use
How to Add HTML Code to Jsf Facesmessage
Bootstrap 5 Layout for Different Sizes Cards - Like Pinterest
Are HTML5 Data Attributes Case Insensitive
CSS: Align Two Element, to The Left and Right in The Same Line Whithout Floats