好玩的CSS3（5）-- 实现正方体+3D切割轮播图+原生JS

本文链接：https://blog.youkuaiyun.com/weixin_41105030/article/details/88982496

这篇博客详细介绍了如何利用CSS3的3D变换实现正方体效果和3D轮播图，包括过渡、transform属性、3D位移、旋转和缩放。此外，还探讨了透视、transform-style属性的应用，并提供了3D切割轮播图的HTML结构和JS实现。

过渡(transition)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。
语法格式

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

transform转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

3D变形

3D位移

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。

3D旋转

在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数：rotateX()、rotateY()和rotateZ()
rotate3d(x,y,z,a)
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

rotateX(a)函数功能等同于rotate3d(1,0,0,a)

3D缩放

通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小。当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。

scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。

透视(perspective)

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

用法

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
erspective 属性只影响 3D 转换元素。
它不是真正意义上的3D，只是视觉上的3D

语法

perspective 属性只影响 3D 转换元素。

    <style>
        body{
    
    
            perspective: 50px;
            -webkit-perspective: 50px; /* Safari 和 Chrome */
        }
        div{
    
    
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
            transform-origin: center bottom;
        }
        div:hover{
    
    
            transform: rotateX(360deg);
            transition: all 2s;
        }
    </style>
    
<body>
    <div></div>
</body>

transform-style实现正方体

transform–style属性指定嵌套元素是怎样在三维空间中呈现。

语法

transform-style: flat|preserve-3d;

flat:表示所有子元素在2D平面呈现。
preserve-3d:表示所有子元素在3D空间中呈现。

正方体

将所有的正方形初始化，放在box父元素，定位在同一位置

<style>
        .box{
    
    
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
        }
        .box>div{
    
    
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            line-height: 200px;
            color: #fff;
            font-size: 30px;
        }
</style>
    <div class="box">
        <div>正</div>
        <div>背</div>
        <div>右</div>
        <div>左</div>
        <div>下</div>
        <div>上</div>
    </div>

正面和背面:比较简单一个向前一个向后根据box移动相同位置

        .box>div:nth-child(1){
   
   
            background: rgba(255,44,66,0.1);
            transform: translateZ(-100px);
        }
        .box>div:nth-child(2){
   
   
            background: rgba(44,44,66,0.1);
            transform: translateZ(100px);
        }

左右两个侧面:先移动在进行旋转，如果先旋转，轴也会跟着转动，我们需要考虑轴的变化，在进行移动

        .box>div:nth-child(3){
   
   
            background: rgba(255,44,255,0.1);
            transform:  translateX(100px) rotateY(90deg);
            /*transform:  rotateY(90deg) translateZ(100px);*/
        }
        .box>div:nth-child(4){
   
   
            background: rgba(255,255,66,0.1);
            transform: translateX(-100px) rotateY(90deg) ;
        }

如果先旋转，等同于以下3D效果

        .box>div:nth-child(3){
   
   
                     transform:  rotateY(90deg) translateZ(100px);
                 }

上面和下面:向上移动和向下移动，不是下面条煮面条吃的那个下面…

       .box>div:nth-child(5){
   
   
            background: rgba(20,78,15,0.1);
            transform: translateY(-100px) rotateX(90deg);
        }
        .box>div:nth-child(6){
   
   
            background: rgba(75,64,99,0.1);
            transform: