前端培训,CSS3培训
您的位置: 主页 > web前端培训文章 >

CSS3制作3D轮播【访问量:133】

前端开发人员在涉及内容轮播时有很多选择。既然我们在浏览器中具有3D功能,为什么不尝试创建一个真正的3D轮播?

此演示的标记采用与盒子,立方体和卡片相同的格式。让我们把它变得有趣,并有9个面板的旋转木马。

<section class="container">
  <div id="carousel">
    <figure>1</figure>
    <figure>2</figure>
    <figure>3</figure>
    <figure>4</figure>
    <figure>5</figure>
    <figure>6</figure>
    <figure>7</figure>
    <figure>8</figure>
    <figure>9</figure>
  </div>
</section>

现在应用基本的布局样式。让我们给每个面板#carousel20px之间的差距,在这里完成left: 10px;和top: 10px;。每个面板的有效宽度仍为210px。

.container {
	width: 210px;
	height: 140px;
	position: relative;
	perspective: 1000px;
}

#carousel {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
}

#carousel figure {
	margin: 0;
	display: block;
	position: absolute;
	width: 186px;
	height: 116px;
	left: 10px;
	top: 10px;
	border: 2px solid black;
}

接下来:旋转脸部。这#carousel有9个面板。如果每个面板在传送带上均匀分布,则每个面板将从下一个(360/9)旋转40度。

#carousel figure:nth-child(1) { transform: rotateY(   0deg ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ); }

现在向外转移。当我们创建立方体和方框时,该translate值很容易计算,因为它等于对象宽度,高度或深度的一半。现在用旋转木马,没有我们可以立即参考的尺寸。我们将通过其他方式计算轮班的距离。

绘制旋转木马图,我们看到我们只知道两件事:每个面板的宽度为210px,每个面板从下一个旋转40度。如果我们将这些三角形中的一个分解到其中心,我们会得到一个直角三角形,用于某些三角函数的素数。diagram.png

我们可以用一个基本的切线方程来确定这个图中r的长度。
calc.png
 在那里,288px是3D空间翻译面板的距离。

#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }

如果我们决定改变面板的宽度或者面板的数量,我们只需要将这两个变量插入我们的方程就可以得到合适的translateZ值。用JS的术语来说,这个等式是:

var tz = Math.round( ( panelSize / 2 ) / 
  Math.tan( ( ( Math.PI * 2 ) / numberOfPanels ) / 2 ) );
// or simplified to
var tz = Math.round( ( panelSize / 2 ) / 
  Math.tan( Math.PI / numberOfPanels ) );

就像我们以前的3D对象一样,为了显示任何一个面板,我们只需要在旋转木马上应用反向变换。以下是显示第五个面板的样式:

transform: translateZ( -288px ) rotateY( -160deg );

最后的效果图片:
1521698925710226.png

2018-03-22
匿名评论