I'm trying to rotate a cube. Its working perfectly fine in Chrome and Firefox. But not on Safari. Have used the required vendor prefixes also. Here's the code. Help would be appreciated.
I have also checked the css3d support from caniuse.com. And it says, css3d is supported in latest Safari.
Also here's the fiddle - https://jsfiddle.net/u8et35ao/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div class="cube">
<div class="back">Back</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="front">Front</div>
</div>
</body>
</html>
style.css
#keyframes myAnimation {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg) rotateZ(360deg);
-moz-transform: rotateY(360deg) rotateZ(360deg);
-o-transform: rotateY(360deg) rotateZ(360deg);
transform: rotateY(360deg) rotateZ(360deg);
}
}
#-webkit-keyframes myAnimation {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg) rotateZ(360deg);
-moz-transform: rotateY(360deg) rotateZ(360deg);
-o-transform: rotateY(360deg) rotateZ(360deg);
transform: rotateY(360deg) rotateZ(360deg);
}
}
.cube {
transition: transform 2s;
transform: rotateY(0deg);
position: absolute;
width: 100px;
height: 100px;
animation: myAnimation 3s infinite linear;
-webkit-animation: myAnimation 3s infinite linear;
-moz-animation: myAnimation 3s infinite linear;
-o-animation: myAnimation 3s infinite linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
left: 50%;
top: 50%;
}
div:not(.cube) {
width: 100px;
height: 100px;
border: 1px solid black;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
position: absolute;
left: 0;
top: 0;
opacity: 0.8;
}
.front {
background-color: gray;
}
.back {
-webkit-transform: translateZ(-100px);
-moz-transform: translateZ(-100px);
-o-transform: translateZ(-100px);
transform: translateZ(-100px);
background-color: green;
}
.top {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
background-color: red;
}
.bottom {
-webkit-transform: translateY(100px) rotateX(-90deg);
-moz-transform: translateY(100px) rotateX(-90deg);
-o-transform: translateY(100px) rotateX(-90deg);
transform: translateY(100px) rotateX(-90deg);
background-color: blue;
}
.left {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
background-color: yellow;
}
.right {
-webkit-transform: translateX(100px) rotateY(90deg);
-moz-transform: translateX(100px) rotateY(90deg);
-o-transform: translateX(100px) rotateY(90deg);
transform: translateX(100px) rotateY(90deg);
background-color: brown;
}
/*# sourceMappingURL=style.css.map */
It seems as though Safari is chosing the 'shortest route' to move from 0 deg to 360deg.
This snippet moves it from 0deg to 180deg then 360deg and rotations take place.
#keyframes myAnimation {
0% {
transform: rotateZ(0deg) rotateY(0deg);
}
50% {
transform: rotateZ(180deg) rotateY(180deg);
}
100% {
transform: rotateZ(360deg) rotateY(360deg);
}
}
.cube {
transition: transform 2s;
transform: rotateY(0deg);
position: absolute;
width: 100px;
height: 100px;
animation: myAnimation 3s infinite linear;
transform-style: preserve-3d;
left: 50%;
top: 50%;
}
div:not(.cube) {
width: 100px;
height: 100px;
border: 1px solid black;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
position: absolute;
left: 0;
top: 0;
opacity: 0.8;
}
.front {
background-color: gray;
}
.back {
-webkit-transform: translateZ(-100px);
-moz-transform: translateZ(-100px);
-o-transform: translateZ(-100px);
transform: translateZ(-100px);
background-color: green;
}
.top {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
background-color: red;
}
.bottom {
-webkit-transform: translateY(100px) rotateX(-90deg);
-moz-transform: translateY(100px) rotateX(-90deg);
-o-transform: translateY(100px) rotateX(-90deg);
transform: translateY(100px) rotateX(-90deg);
background-color: blue;
}
.left {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
background-color: yellow;
}
.right {
-webkit-transform: translateX(100px) rotateY(90deg);
-moz-transform: translateX(100px) rotateY(90deg);
-o-transform: translateX(100px) rotateY(90deg);
transform: translateX(100px) rotateY(90deg);
background-color: brown;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cube">
<div class="back">Back</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="front">Front</div>
</div>
</body>
</html>
Related
I need to create vertical animated text rotation for my homepage.
I found this very nice example. It uses the CSS property transform: rotateX(0deg); rotateX(90deg); etc.
But there are only four lines of text and I need 6 sentences. Any idea how to make same effect with more than 4 sentences?
.home{
width:100%;
}
.home:before{
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.9);
}
.home h3{
position:absolute;
font-size:74px;
text-align: left;
color:#009393;
margin-left:15%;
font-weight:700;
}
.stage{
width: auto;
margin-top: 15px;
height: 100px;
}
.cubespinner{
-webkit-animation-name:spincube;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:8s;
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:8s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin:40px 40px 0;
-moz-transform-origin:40px 40px 0;
-ms-transform-origin:40px 40px 0;
transform-origin:40px 40px 0;
}
.cubespinner div{
position:absolute;
width:400px;
height:80px;
text-align:left;
color:#109393;
font-family:'Raleway', sans-serif;
font-size:74px;
font-weight:700;
}
.cubespinner .face1{
color:#f1c40f;
-webkit-transform:translateZ(40px);
-moz-transform:translateZ(40px);
-ms-transform:translateZ(40px);
transform:translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face2{
color:#fff;
-webkit-transform: rotateX(90deg) translateZ(40px);
-moz-transform: rotateX(90deg) translateZ(40px);
-ms-transform: rotateX(90deg) translateZ(40px);
transform: rotateX(90deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face3{
color:#f85555;
-webkit-transform:rotateX(180deg) translateZ(40px);
-moz-transform:rotateX(180deg) translateZ(40px);
-ms-transform:rotateX(180deg) translateZ(40px);
transform:rotateX(180deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face4{
color:#fff;
-webkit-transform:rotateX(270deg) translateZ(40px);
-moz-transform:rotateX(270deg) translateZ(40px);
-ms-transform:rotateX(270deg) translateZ(40px);
transform:rotateX(270deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
/*Cubical Flipping or rotation*/
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
15% { -webkit-transform: rotateX(90deg);}
25% { -webkit-transform: rotateX(90deg);}
40% { -webkit-transform: rotateX(180deg);}
50% { -webkit-transform: rotateX(180deg);}
65% { -webkit-transform: rotateX(270deg);}
75% { -webkit-transform: rotateX(270deg);}
95% { -webkit-transform: rotateX(360deg);}
100% { -webkit-transform: rotateX(360deg);}
}#keyframes spincube {
from,to {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
15% {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
25% {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
40% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
65% {
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-ms-transform: rotateX(270deg);
transform: rotateX(270deg);
}
75% {
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-ms-transform: rotateX(270deg);
transform: rotateX(270deg);
}
90% {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
100% {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
<div class="home col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 id="resizing-h3" class="" >
<span>
<div class="stage">
<div class="cubespinner">
<div class="face1">Innovative</div>
<div class="face2">Creative</div>
<div class="face3">Unbeatable</div>
<div class="face4">Exceptional</div>
</div>
</div>
</span>
</h3>
</div>
Use of a blank sentence in 2 places
I've attached a code.
It is simple, I just duplicated the div "cubespinner" and make 6 sentences, like you want.
It's a lightweight solution, not for any number of sentences, but it's enough for 6 :)
.home{
width:100%;
}
.home:before{
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.9);
}
.home h3{
position:absolute;
font-size:74px;
text-align: left;
color:#009393;
margin-left:15%;
font-weight:700;
}
.stage{
width: auto;
margin-top: 15px;
height: 100px;
}
.cubespinner{
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:12s;
transform-style:preserve-3d;
transform-origin:40px 40px 0;
}
.cubespinner2{
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:12s;
animation-delay: 6s;
transform-style:preserve-3d;
transform-origin:40px 40px 0;
}
.cubespinner div, .cubespinner2 div{
position:absolute;
width:400px;
height:80px;
text-align:left;
color:#109393;
font-family:'Raleway', sans-serif;
font-size:74px;
font-weight:700;
}
.cubespinner .face1, .cubespinner2 .face1{
color:#f1c40f;
transform:translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face2, .cubespinner2 .face2{
color:#fff;
transform: rotateX(90deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face3, .cubespinner2 .face3{
color:#f85555;
transform:rotateX(180deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face4, .cubespinner2 .face4{
color:#f1c40f;
transform:rotateX(270deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
/*Cubical Flipping or rotation*/
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
5% { -webkit-transform: rotateX(90deg);}
16% { -webkit-transform: rotateX(90deg);}
21% { -webkit-transform: rotateX(180deg);}
33% { -webkit-transform: rotateX(180deg);}
38% { -webkit-transform: rotateX(270deg);}
50% { -webkit-transform: rotateX(270deg);}
55% { -webkit-transform: rotateX(360deg);}
100% { -webkit-transform: rotateX(360deg);}
}
<div class="home col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 id="resizing-h3" class="" >
<span>
<div class="stage">
<div class="cubespinner">
<div class="face1"></div>
<div class="face2">Creative</div>
<div class="face3">Unbeatable</div>
<div class="face4">Exceptional</div>
</div>
<div class="cubespinner2">
<div class="face1"></div>
<div class="face2">666666</div>
<div class="face3">555555</div>
<div class="face4">Innovative</div>
</div>
</div>
</span>
</h3>
</div>
I try to create an animation like the animation on mac for a carousel.
I tried to use a 3D cube as the base, but I don't find a way to ad more than four elements in the carousel without broke the animation.
.wrap {
perspective: none;
perspective-origin: 0 0;
margin: 0 auto;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border-style: solid;
border-color: black;
background-color: blue;
opacity: 1;
color : white;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
transform: translateZ(100px);
}
#keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(-360deg);
}
}
.cube {
animation: spin 5s infinite linear;
}
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
i try This code : https://jsfiddle.net/Goby03/jxm8c2ob/
I make 3D cube animation like this one:
.stage {
width: 120px;
height: 120px;
}
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(-270deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}
#keyframes spincube {
from,to {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
33% {
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
-moz-transform: rotateY(-270deg) rotateX(90deg);
-ms-transform: rotateY(-270deg) rotateX(90deg);
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
.cubespinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
-moz-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}
.cubespinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: blue;
line-height: 120px;
text-align: center;
font-size: 100px;
color: #fff;
}
.cubespinner .face1 {
-webkit-transform: translateZ(60px);
-moz-transform: translateZ(60px);
-ms-transform: translateZ(60px);
transform: translateZ(60px);
}
.cubespinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
.cubespinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
.cubespinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}
.cubespinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}
.cubespinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(60px);
-moz-transform: rotateX(-90deg) translateZ(60px);
-ms-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}
<div class="stage">
<div class="cubespinner">
<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>
UPDATE
Hope it's what you're looking for.
$(document).ready(function(){
var carouselCustomeTemplateProps = {
width: 400, /* largest allowed width */
height: 300, /* largest allowed height */
slideLayout : 'fill', /* "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio) */
animation: 'slide3D', /* slide | scroll | fade | zoomInSlide | zoomInScroll */
animationCurve: 'ease',
animationDuration: 1900,
animationInterval: 2000,
slideClass: 'jR3DCarouselCustomSlide',
autoplay: true,
controls: true, /* control buttons */
navigation: '' /* circles | squares | '' */,
perspective: 200,
rotationDirection: 'ltr',
onSlideShow: slideShownCallback
}
function slideShownCallback($slide){
$slide.find('img').attr('src')
}
jR3DCarouselCustomeTemplate = $('.jR3DCarouselGalleryCustomeTemplate').jR3DCarousel(carouselCustomeTemplateProps);
})
.jR3DCarouselGalleryCustomeTemplate {
margin: 0 auto;
}
.jR3DCarouselGalleryCustomeTemplate .captions{
position: relative;
padding: 4px 0;
bottom: 27px;
background: #000;
color: #fff;
display:block;
text-align: center
}
.jR3DCarouselGalleryCustomeTemplate a{
text-decoration: none;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/v1.0.0/dist/jR3DCarousel.min.js"></script>
</head>
<div class="container">
<div class="jR3DCarouselGalleryCustomeTemplate">
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=838" />
<div class="captions">This is custom text slide 1</div>
</div>
<div class="jR3DCarouselCustomSlide">
<a href="http://vinayakjadhav.github.io/jR3DCarousel/" target="_blank">
<img src="https://picsum.photos/600/450?image=839" />
<span class="captions">This is clickable slide 2</span>
</a>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=823" />
<div class="captions">This is custom text slide 3</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=836" />
<div class="captions">This is custom text slide 4</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=838" />
<div class="captions">This is custom text slide 3</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=832" />
<div class="captions">This is custom text slide 4</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=837" />
<div class="captions">This is custom text slide 5</div>
</div>
</div>
</div>
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>
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 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>