I made this CSS carousel after following a tutorial online and realized it wasn't responsive. I have tried resizing the images how ever, it doesn't effect the actual carousel, I tried adding bootstrap to see if it would help but no luck. to clarify I am trying to make the size of the carousel responsive, I have already made the images responsive. I really like the look of this carousel and would like to use it for my porfolio. any suggestions?
#wrappercarousel {
perspective: 2500;
-webkit-perspective: 2500;
width: 1000px;
margin:60px 0 40 auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
-webkit-transition: 1s, -webkit-perspective;
transition: 1s, -webkit-perspective;
-o-transition: perspective, 1s;
transition: perspective, 1s;
transition: perspective, 1s, -webkit-perspective;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
}
#-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(500px);
-webkit-perspective: 2500px;
perspective: 2500px;
}
#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(500px);
}
#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(500px);
}
#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(500px);
}
#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(500px);
}
#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(500px);
}
#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(500px);
}
#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(500px);
}
#image > .i9 {
transform: rotateY(360deg) translateZ(485px);
-moz-transform: rotateY(360deg) translateZ(485px);
-o-transform: rotateY(360deg) translateZ(485px);
-ms-transform: rotateY(360deg) translateZ(485px);
-webkit-transform: rotateY(360deg) translateZ(500px);
}
#image img{
height: 300px;
width: 400px;
margin-bottom: 0px;
}
img {
border-radius: 1px;
}
<div class= "animated fadeIn " id="wrappercarousel">
<div id="image">
<div class="image i1"><img src="/images/carousel/oliver%20people.jpg"></div>
<div class="image i2"><img src="/images/carousel/newmaui.jpg"></div>
<div class="image i3"><img src="/images/carousel/Theo1.jpg"></div>
<div class="image i4"><img src="/images/carousel/Sunday%20Somewhere.jpg"></div>
<div class="image i5"><img src="images/carousel/oliver%20people.jpg"></div>
<div class="image i6"><img src="images/carousel/newmaui.jpg"></div>
<div class="image i7"><img src="images/carousel/Theo1.jpg"></div>
<div class="image i8"><img src="images/carousel/Sunday%20Somewhere.jpg"></div>
</div>
</div>
#wrappercarousel {
perspective: 2500;
-webkit-perspective: 2500;
max-width: 1000px;
width:80%;
margin:6% 0 4% auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
-webkit-transition: 1s, -webkit-perspective;
transition: 1s, -webkit-perspective;
-o-transition: perspective, 1s;
transition: perspective, 1s;
transition: perspective, 1s, -webkit-perspective;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
}
#image img{
height: 300px;
max-width: 400px;
width:100%;
margin-bottom: 0px;
}
This should work
You made a common mistake applying width in pixel
Pixel in img's
Pixel will most of the time fail to add up responsive
Thanks for the fiddle
i have edited and fix , hope this one helps you
#wrappercarousel {
perspective: 2500px;
-webkit-perspective: 2500px;
width: 100%;
margin: 0 auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
-webkit-transition: 1s, -webkit-perspective;
transition: 1s, -webkit-perspective;
-o-transition: perspective, 1s;
transition: perspective, 1s;
transition: perspective, 1s, -webkit-perspective;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
overflow-x: hidden;
}
#-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: 50%;
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: 100%;
width: 50%;
border-radius: 25px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
font-size: 20em;
color: #fff;
overflow:hidden
}
#image>.i1 {
transform: translateZ(185px);
-moz-transform: translateZ(185px);
-o-transform: translateZ(185px);
-ms-transform: translateZ(185px);
-webkit-transform: translateZ(185px);
-webkit-perspective: 2500px;
perspective: 2500px;
}
#image>.i2 {
transform: rotateY(45deg) translateZ(185px);
-moz-transform: rotateY(45deg) translateZ(185px);
-o-transform: rotateY(45deg) translateZ(185px);
-ms-transform: rotateY(45deg) translateZ(185px);
-webkit-transform: rotateY(45deg) translateZ(185px);
}
#image>.i3 {
transform: rotateY(90deg) translateZ(185px);
-moz-transform: rotateY(90deg) translateZ(185px);
-o-transform: rotateY(90deg) translateZ(185px);
-ms-transform: rotateY(90deg) translateZ(185px);
-webkit-transform: rotateY(90deg) translateZ(185px);
}
#image>.i4 {
transform: rotateY(135deg) translateZ(185px);
-moz-transform: rotateY(135deg) translateZ(185px);
-o-transform: rotateY(135deg) translateZ(185px);
-ms-transform: rotateY(135deg) translateZ(185px);
-webkit-transform: rotateY(135deg) translateZ(185px);
}
#image>.i5 {
transform: rotateY(180deg) translateZ(185px);
-moz-transform: rotateY(180deg) translateZ(185px);
-o-transform: rotateY(180deg) translateZ(185px);
-ms-transform: rotateY(180deg) translateZ(185px);
-webkit-transform: rotateY(180deg) translateZ(185px);
}
#image>.i6 {
transform: rotateY(225deg) translateZ(185px);
-moz-transform: rotateY(225deg) translateZ(185px);
-o-transform: rotateY(225deg) translateZ(185px);
-ms-transform: rotateY(225deg) translateZ(185px);
-webkit-transform: rotateY(225deg) translateZ(185px);
}
#image>.i7 {
transform: rotateY(270deg) translateZ(185px);
-moz-transform: rotateY(270deg) translateZ(185px);
-o-transform: rotateY(270deg) translateZ(185px);
-ms-transform: rotateY(270deg) translateZ(185px);
-webkit-transform: rotateY(270deg) translateZ(185px);
}
#image>.i8 {
transform: rotateY(315deg) translateZ(185px);
-moz-transform: rotateY(315deg) translateZ(185px);
-o-transform: rotateY(315deg) translateZ(185px);
-ms-transform: rotateY(315deg) translateZ(185px);
-webkit-transform: rotateY(315deg) translateZ(185px);
}
#image>.i9 {
transform: rotateY(360deg) translateZ(185px);
-moz-transform: rotateY(360deg) translateZ(185px);
-o-transform: rotateY(360deg) translateZ(185px);
-ms-transform: rotateY(360deg) translateZ(185px);
-webkit-transform: rotateY(360deg) translateZ(185px);
}
#image img {
height: 100%;
width: 100%;
margin-bottom: 0px;
}
img {
border-radius: 1px;
}
<div class="animated fadeIn " id="wrappercarousel">
<div id="image">
<div class="image i1"><img src="/images/carousel/oliver%20people.jpg"></div>
<div class="image i2"><img src="/images/carousel/newmaui.jpg"></div>
<div class="image i3"><img src="/images/carousel/Theo1.jpg"></div>
<div class="image i4"><img src="/images/carousel/Sunday%20Somewhere.jpg"></div>
<div class="image i5"><img src="images/carousel/oliver%20people.jpg"></div>
<div class="image i6"><img src="images/carousel/newmaui.jpg"></div>
<div class="image i7"><img src="images/carousel/Theo1.jpg"></div>
<div class="image i8"><img src="images/carousel/Sunday%20Somewhere.jpg"></div>
</div>
</div>
Related
I recently came across this pen on codepen https://codepen.io/joshnh/pen/paxbE
I have been playing around with this animation but am unable to get it working on any other browser other than chrome. I have tried all prefixes with transform and transitions. when I remove the perspective(500) property the animation works in firefox but not with the desired results. From what I've read it is something to do with the way chrome applies the perspective property to child elements differently than other browsers. Is there any work around to getting this type of animation working across all browsers?
This is what I have changed the css to in order to get it working in other browsers but nothing seems to help.
html {
height: 100%;
}
body {
position: absolute;
width: 100%;
height: 100%;
-moz-animation: myfade 5s;
-webkit-animation: myfade 5s;
animation: myfade 5s;
background: url("../img/screenbackground.jpg");
}
button {
position: absolute;
top: 0.6%;
margin-left: 2%;;
border: none;
background: #3a7999;
color: #f2f2f2;
padding: 10px;
font-size: 14px;
border-radius: 5px;
opacity: 0;
box-sizing: border-box;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
}
button:hover {
background: #000000;
color: #3a7999;
box-shadow: inset 0 0 0 3px #3a7999;
}
.imageWrapper {
background-color:transparent;
font-family: sans-serif;
font-size: 100%;
line-height: 20%;
margin: 0 auto;
padding: 1em;
width: 80%;
height: 60%;
margin-top: 3%;
}
figure {
float: left;
height: 12em;
margin: 3em;
margin-top: 1em;
margin-bottom: 0.5em;
width: 24em;
-webkit-transform: perspective(500);
-webkit-transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transform: perspective(500);
-moz-transform-style: preserve-3d;
-moz-transition: .5s;
transform: perspective(500);
transform-style: preserve-3d;
transition: .5s;
border-radius: 5px;
-webkit-animation: myflip;
-moz-animation: myflip;
-ms-animation: myflip;
animation: myflip 5s;
}
figure:hover {
-webkit-transform: perspective(500) rotateX(90deg) translateY(-48px)
translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateY(-48px)
translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateY(-48px)
translateZ(60px);
transform: perspective(500) rotateX(90deg) translateY(-48px)
translateZ(60px);
}
img {
background-color: #222;
box-shadow: 0 40px 30px -20px hsla(0,0%,0%,.25);
display: block;
height: 100%;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
}
figure:hover img {
box-shadow: none;
}
figcaption {
background-color: #222;
color: #fff;
padding: 1.5em;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: 100% 0;
-webkit-transition: .5s;
-moz-transform: rotateX(-90deg);
-moz-transform-origin: 100% 0;
-moz-transition: .5s;
transform: rotateX(-90deg);
transform-origin: 100% 0;
transition: .5s;
}
figure:hover figcaption {
box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
}
h3 {
font-weight: bold;
}
#-webkit-keyframes myflip {
0% {
-webkit-transform: perspective(500) rotateX(90deg) translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
50% {
-webkit-transform: perspective(500) rotateX(90deg) translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
80% {
-webkit-transform: perspective(500) rotateX(90deg)
translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
100% {
}
}
#-moz-keyframes myflip {
0% {
-webkit-transform: perspective(500) rotateX(90deg) translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
50% {
-webkit-transform: perspective(500) rotateX(90deg) translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
80% {
-webkit-transform: perspective(500) rotateX(90deg)
translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
100% {
}
}
#keyframes myflip {
0% {
-webkit-transform: perspective(500) rotateX(90deg) translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
50% {
-webkit-transform: perspective(500) rotateX(90deg) translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
80% {
-webkit-transform: perspective(500) rotateX(90deg)
translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
100% {
}
}
#-ms-keyframes myflip {
0% {
-webkit-transform: perspective(500) rotateX(90deg) translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
50% {
-webkit-transform: perspective(500) rotateX(90deg) translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
80% {
-webkit-transform: perspective(500) rotateX(90deg)
translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateZ(60px);
-ms-transform: perspective(500) rotateX(90deg) translateZ(60px);
transform: perspective(500) rotateX(90deg) translateZ(60px);
}
100% {
}
}
#-webkit-keyframes myfade {
0% {
opacity: 0;
}
100% {
opacity 1;
}
}
#-moz-keyframes myfade {
0% {
opacity: 0;
}
100% {
opacity 1;
}
}
#keyframes myfade {
0% {
opacity: 0;
}
100% {
opacity 1;
}
}
The CSS perspective property accepts length as parameter, which means you should use a unit like px.
Also, in order to see your pen working in Firefox, you should add the vendor-prefix-free version of the -webkit properties you're using and add a unit to the perspective property, like in perspective(500px). See modified pen.
Full code is on: https://jsfiddle.net/k1t7gy8L/
I have the following HTML:
<section class="cd-intro">
<div class="cd-intro-content mask-2">
<div class="content-wrapper">
<div class="inner">
<h1>Animated Intro Section</h1>
<p>A collection of text effects for the intro section of your website</p>
<div class="action-wrapper">
Get started
Learn More
</div>
</div>
</div>
</div>
</section>
with the following CSS:
.mask-2.cd-intro-content .content-wrapper {
position: relative;
width: 100%;
max-width: 650px;
margin: 0 auto;
padding: 2em 0;
overflow: hidden;
transform:rotate(45deg);
background-color: #0F0;
}
.mask-2.cd-intro-content .content-wrapper .inner{
transform:rotate(-45deg);
background-color: #F00;
}
.mask-2.cd-intro-content .content-wrapper > div {
position: relative;
z-index: 1;
}
.mask-2.cd-intro-content .content-wrapper,
.mask-2.cd-intro-content .content-wrapper > div {
animation-duration: 3.5s;
animation-delay: 1.1s;
animation-fill-mode: backwards;
}
.mask-2.cd-intro-content .content-wrapper {
animation-name: cd-mask-wrapper;
}
.mask-2.cd-intro-content .content-wrapper > div {
animation-name: cd-mask-content;
}
#keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes cd-mask-content {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
Everything works like a charm: Except that the rotation on transform:rotate(45deg); only takes effect AFTER the animation. Why is that? How can I rotate it prior to the animation?.
My idea idea is to reveal the content with a diagonal line instead of a vertical line.
You have to declare everything on transform. But also you have to note that translate will be rotated, so with the superpower of geometry you can do this:
#keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%) rotate(45deg);
-moz-transform: translateX(50%) rotate(45deg);
-ms-transform: translateX(50%) rotate(45deg);
-o-transform: translateX(50%) rotate(45deg);
transform: translateX(50%) rotate(45deg);
}
100% {
-webkit-transform: translateX(0) rotate(45deg);
-moz-transform: translateX(0) rotate(45deg);
-ms-transform: translateX(0) rotate(45deg);
-o-transform: translateX(0) rotate(45deg);
transform: translateX(0) rotate(45deg);
}
}
#keyframes cd-mask-content {
0% {
-webkit-transform: rotate(-45deg) translateX(-100%);
-moz-transform: rotate(-45deg) translateX(-100%);
-ms-transform: rotate(-45deg) translateX(-100%);
-o-transform: rotate(-45deg) translateX(-100%);
transform: rotate(-45deg) translateX(-100%);
}
100% {
-webkit-transform: rotate(-45deg) translateX(0);
-moz-transform rotate(-45deg) translateX(0);
-ms-transform: rotate(-45deg) translateX(0);
-o-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
}
}
Yes. IT is important to translate then rotate the wrapper. And rotate and then translate the content. Test it =)
I'm here again with another webkit css3 animation problem. I've tried absolutely everything, even over-defining CSS properties.
The problem I'm having is the hover animations are cutting to the end when hovering in and out on webkit. It also has some strangeness when activating and deactivating where it seems to remember old values and try to animate to them.
I'm wondering whether I'm just missing something here, or Chrome is just incredibly buggy recently. Here is an example:
$(".offcanvas").click(function() {
$('body').toggleClass('uk-offcanvas-page');
});
html,
body {
padding: 0;
margin: 0;
background: #de1b4a;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Bar */
header .offcanvas .bar {
display: inline-block;
position: relative;
width: 20px;
height: 2px;
margin: 8px 0 !important;
background: #fff;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
header .offcanvas .bar:before {
content: '';
display: block;
position: absolute;
top: 8px;
left: 0;
background: inherit;
width: inherit;
height: inherit;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
header .offcanvas .bar:after {
content: '';
display: block;
position: absolute;
bottom: 8px;
left: 0;
background: inherit;
width: inherit;
height: inherit;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
/* Bar Hover */
header .offcanvas:hover .bar {
-webkit-transform: rotateZ(0deg) translateX(-3px);
-moz-transform: rotateZ(0deg) translateX(-3px);
-ms-transform: rotateZ(0deg) translateX(-3px);
-o-transform: rotateZ(0deg) translateX(-3px);
transform: rotateZ(0deg) translateX(-3px);
}
header .offcanvas:hover .bar:before {
-webkit-transform: rotateZ(0deg) translateX(6px);
-moz-transform: rotateZ(0deg) translateX(6px);
-ms-transform: rotateZ(0deg) translateX(6px);
-o-transform: rotateZ(0deg) translateX(6px);
transform: rotateZ(0deg) translateX(6px);
}
header .offcanvas:hover .bar:after {
-webkit-transform: rotateZ(0deg) translateX(6px);
-moz-transform: rotateZ(0deg) translateX(6px);
-ms-transform: rotateZ(0deg) translateX(6px);
-o-transform: rotateZ(0deg) translateX(6px);
transform: rotateZ(0deg) translateX(6px);
}
/* Bar Close */
.uk-offcanvas-page header .offcanvas .bar,
.uk-offcanvas-page header.uk-active .offcanvas .bar {
background: rgba(0, 0, 0, 0);
}
.uk-offcanvas-page header .offcanvas:hover .bar {
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
}
.uk-offcanvas-page header .offcanvas .bar:before {
-webkit-transform: rotateZ(45deg) translateX(-11px);
-moz-transform: rotateZ(45deg) translateX(-11px);
-ms-transform: rotateZ(45deg) translateX(-11px);
-o-transform: rotateZ(45deg) translateX(-11px);
transform: rotateZ(45deg) translateX(-11px);
background: #fff;
}
.uk-offcanvas-page header .offcanvas .bar:after {
-webkit-transform: rotateZ(-45deg) translateX(-11px);
-moz-transform: rotateZ(-45deg) translateX(-11px);
-ms-transform: rotateZ(-45deg) translateX(-11px);
-o-transform: rotateZ(-45deg) translateX(-11px);
transform: rotateZ(-45deg) translateX(-11px);
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center">
<header>
<div class="offcanvas"><i class="bar"></i>
</div>
</header>
</div>
I've slowed down the animations so you can see it skipping, but hover in and out to see it.
I was wondering if anyone more advanced could help me on this one?
Thanks,
Tom
I am using css animations to try and get the green lines to spin around the red circle perfectly alined. I have linked to my fiddle where I have tried to get it working. any advice would be much appropriated. thanks!
[fiddle][1]
[1]: http://jsfiddle.net/3s07jbL4/3/
.badge {
position: relative;
width: 400px;
height:400px;
border-radius: 50%;
transform: rotate(-50deg);
background:red;
}
span {
font: 16px Monaco,monospace;
height: 240px;
position: absolute;
width: 34px;
left: 0px;
top: 0px;
transform-origin: center bottom 0px;
clip: rect(0px, 38px, 63px, 0px);
background:green;
}
span img {
width: 100%;
}
.day1 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.day2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
.day3 {
-webkit-transform: rotate(24deg);
-moz-transform: rotate(24deg);
-ms-transform: rotate(24deg);
-o-transform: rotate(24deg);
transform: rotate(24deg);
}
.day4 {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
}
.day5 {
-webkit-transform: rotate(48deg);
-moz-transform: rotate(48deg);
-ms-transform: rotate(48deg);
-o-transform: rotate(48deg);
transform: rotate(48deg);
}
.day6 {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.day7 {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
.day8 {
-webkit-transform: rotate(84deg);
-moz-transform: rotate(84deg);
-ms-transform: rotate(84deg);
-o-transform: rotate(84deg);
transform: rotate(84deg);
}
.day9 {
-webkit-transform: rotate(96deg);
-moz-transform: rotate(96deg);
-ms-transform: rotate(96deg);
-o-transform: rotate(96deg);
transform: rotate(96deg);
}
.day10 {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
}
.day11 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.day12 {
-webkit-transform: rotate(132deg);
-moz-transform: rotate(132deg);
-ms-transform: rotate(132deg);
-o-transform: rotate(132deg);
transform: rotate(132deg);
}
.day13 {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-o-transform: rotate(144deg);
transform: rotate(144deg);
}
.day14 {
-webkit-transform: rotate(156deg);
-moz-transform: rotate(156deg);
-ms-transform: rotate(156deg);
-o-transform: rotate(156deg);
transform: rotate(156deg);
}
.day15 {
-webkit-transform: rotate(168deg);
-moz-transform: rotate(168deg);
-ms-transform: rotate(168deg);
-o-transform: rotate(168deg);
transform: rotate(168deg);
}
.day16 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.day17 {
-webkit-transform: rotate(192deg);
-moz-transform: rotate(192deg);
-ms-transform: rotate(192deg);
-o-transform: rotate(192deg);
transform: rotate(192deg);
}
.day18 {
-webkit-transform: rotate(204deg);
-moz-transform: rotate(204deg);
-ms-transform: rotate(204deg);
-o-transform: rotate(204deg);
transform: rotate(204deg);
}
.day19 {
-webkit-transform: rotate(216deg);
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-o-transform: rotate(216deg);
transform: rotate(216deg);
}
.day20 {
-webkit-transform: rotate(228deg);
-moz-transform: rotate(228deg);
-ms-transform: rotate(228deg);
-o-transform: rotate(228deg);
transform: rotate(228deg);
}
.day21 {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
.day22 {
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-ms-transform: rotate(252deg);
-o-transform: rotate(252deg);
transform: rotate(252deg);
}
.day23 {
-webkit-transform: rotate(264deg);
-moz-transform: rotate(264deg);
-ms-transform: rotate(264deg);
-o-transform: rotate(264deg);
transform: rotate(264deg);
}
.day24 {
-webkit-transform: rotate(276deg);
-moz-transform: rotate(276deg);
-ms-transform: rotate(276deg);
-o-transform: rotate(276deg);
transform: rotate(276deg);
}
.day25 {
-webkit-transform: rotate(288deg);
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-o-transform: rotate(288deg);
transform: rotate(288deg);
}
.day26 {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
.day27 {
-webkit-transform: rotate(312deg);
-moz-transform: rotate(312deg);
-ms-transform: rotate(312deg);
-o-transform: rotate(312deg);
transform: rotate(312deg);
}
.day28 {
-webkit-transform: rotate(324deg);
-moz-transform: rotate(324deg);
-ms-transform: rotate(324deg);
-o-transform: rotate(324deg);
transform: rotate(324deg);
}
.day29 {
-webkit-transform: rotate(336deg);
-moz-transform: rotate(336deg);
-ms-transform: rotate(336deg);
-o-transform: rotate(336deg);
transform: rotate(336deg);
}
.day30 {
-webkit-transform: rotate(348deg);
-moz-transform: rotate(348deg);
-ms-transform: rotate(348deg);
-o-transform: rotate(348deg);
transform: rotate(348deg);
}
.day31 {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.badge
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
width: 400px;
height: 400px;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
<div id="spin">
<div class="badge">
<span class="day1">
1
</span>
<span class="day2">
1
</span>
<span class="day3">
1
</span>
<span class="day4">
1
</span>
<span class="day5">
1
</span>
<span class="day6">
1
</span>
<span class="day7">
1
</span>
<span class="day8">
1
</span>
<span class="day9">
1
</span>
<span class="day10">
1
</span>
<span class="day11">
1
</span>
<span class="day12">
1
</span>
<span class="day13">
1
</span>
<span class="day14">
1
</span>
<span class="day15">
1
</span>
<span class="day16">
1
</span>
<span class="day17">
1
</span>
<span class="day18">
1
</span>
<span class="day19">
1
</span>
<span class="day20">
1 </span>
<span class="day21">
1 </span>
<span class="day22">
1
</span>
<span class="day23">
1
</span>
<span class="day24">
1
</span>
<span class="day25">
1
</span>
<span class="day26">
1
</span>
<span class="day27">
1
</span>
<span class="day28">
1
</span>
<span class="day29">
1
</span>
<span class="day30">
1
</span>
</div>
</div>
To center all of the day elements horizontally, add left: 50% and margin-left: -17px to the span elements. (-17px is because they are 34px wide, and 17 is half of 34).
To center them vertically, add margin-top: -40px to them. This is because their heights are kind of arbitrary, and adding this will correct it.
http://jsfiddle.net/3s07jbL4/15/
I am working on a contest but I am having some difficulties. I need to create a cube (rotating) using only CSS. The only HTML code that I have to use is:
<div id="container">
<div id="imasters-cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</div>
I pasted an image so you can see the result that I need:
http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a
So far I am using absoluted positioned elements to create the 6 faces but I have no idea how to make it rotate using only CSS. No JS, please!
Thank you so much
There are tons of tutorials/examples show how to do this: Example 1 Example 2 Example 3 Example 4 etc.
Pulled from Example 2:
.spinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: rgba(255,255,255,0.8);
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
text-align: center;
line-height: 120px;
font-size: 100px;
}
.spinner .face1 {
-webkit-transform: translateZ(60px);
-ms-transform: translateZ(60px);
transform: translateZ(60px);
}
.spinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
.spinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
.spinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}
.spinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}
.spinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(60px);
-ms-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}
.spinner {
-webkit-animation: spincube 12s ease-in-out infinite;
animation: spincube 12s ease-in-out infinite;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}
#-webkit-keyframes spincube {
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}
#keyframes spincube {
16% { -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); }
33% { -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); }
50% { -ms-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); }
66% { -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); }
83% { -ms-transform: rotateX(90deg); transform: rotateX(90deg); }
}
<div id="stage" style="width: 120px; height: 120px;">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
<div class="face5">5</div>
<div class="face6">6</div>
</div>
</div>