具有四个以上元素的3D立方体动画过渡

时间：2017-12-13 09:47:28

标签： css css3 animation 3d

我尝试在mac上为旋转木马创建类似动画的动画。 我尝试使用3D立方体作为基础，但我没有找到方法在旋转木马上广告超过四个元素而不会破坏动画。

.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>

我尝试使用此代码：https://jsfiddle.net/Goby03/jxm8c2ob/

enter image description here

1 个答案:

答案 0 :(得分：3)

我像这样制作3D立方体动画：

  .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>

<强>更新

希望这就是你要找的东西。

$(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>

相关问题
最新问题