3D轮播

目的

• 掌握 transform 3D 效果
• 熟悉 perspective属性

基本概念

CSS3 3D 转换：使元素改变位置、旋转、视角

试一试

先来看一看3D 坐标系
3D 坐标系如下图：

• transform: rotateX(40deg) 沿X 坐标轴旋转40度
• transform: rotateY(40deg) 沿Y 坐标轴旋转40度
• transform: rotateZ(40deg) 沿Z 坐标轴旋转40度
• transform: translateX(-40px) 在 X 坐标轴负向移动 40px
• transform: translateY(40px) 在 Y 坐标轴正向移动 40px
• transform: translateZ(40px) 在 Z 坐标轴正向移动 40px
• transform: translateZ(-40px) 在 Z 坐标轴负向移动 40px

    <div class="ct">
    <div class="box origin">origin</div>
    <div class="box rotateX">rotateX(40deg)</div>
    <div class="box rotateY">rotateY(40deg)</div>
    <div class="box rotateZ">rotateZ(40deg)</div>
  </div>
  <div class="ct">
    <div class="box tranlateX">translateX:-40px</div>
    <div class="box tranlateY">translateY:40px</div>
    <div class="box tranlateZ">translateZ:40px</div>
    <div class="box tranlateZ2">translateZ:-40px</div>
  </div>
    // CSS
 .rotateX {
      transform: rotateX(40deg);
    }
    .rotateY {
      transform: rotateY(40deg);
    }
    .rotateZ {
      transform: rotateZ(40deg);
    }
    .tranlateX {
      transform: translateX(-40px);
    }
    .tranlateY {
      transform: translateY(40px);
    }
    .tranlateZ {
      transform: translateZ(40px);
    }
    .tranlateZ2 {
      transform: translateZ(-40px);
    }

效果图如下：

问题来了？为什么旋转和 Z 轴的偏移没有3D的感觉？ 因为没有透视

perspective

perspective属性有两种书写形式，一种用在3d元素父亲上；第二种就是用在当前3d元素上，与transform的其他属性写在一起。：

.ct {
    perspective: 200px;
}
或
#ct .box {
    transform: perspective(200px) rotateY(45deg);
}

perspective-origin

perspective-origin定义了元素的位置，默认是3d 容器的中心。
当为元素定义perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素，如perspective-origin: 10% 10%;

设置backface-visibility:hidden;看不见元素的背面

3D 轮播

第一步：创建轮播图

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

第二步，设置图片视角

.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 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 ); }

#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 ); }