CSS3 三d立方体实际效果示例－transform也但是这般

2021-01-20 19:05 jianzhan

CSS3系列早已学习培训了1段時间了，还得到了较多网友的适用，在此谢过各位，你们的适用是我写文章内容最大的驱动力^_^。

那末这1篇文章内容呢，关键是根据1个三d立方体的实际效果案例来深层次掌握css3的transform特性，下面是这个案例的截图，再加动漫还能转动起来哟，是否很炫酷？换上你喜爱的女生的相片，便可以胆大的撩妹了，哈哈！

初识transform

说白了：转换。便可以想起它能够做许多许多的事儿了，这个特性有许多的值，在这里简易例举1下：

translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：界定部位的挪动间距。
scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)：界定元素的放缩占比。
rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：界定元素的转动角度。
skew(x-angle,y-angle)、skewX(angle)、skewY(angle)：界定元素的歪斜角度。

三d实际效果的认知能力

大家能够看到这是1个3维的室内空间图，不必被第1眼的繁杂感吓到，细心溶解1下实际上還是很清楚的：总之就X轴、Y轴、Z轴3个方位嘛。

想像1下，倘若你如今坐在电脑上眼前，电脑上显示屏管理中心是原点，原点往右便是X轴正方位，往下便是Y轴正方位，往显示屏正前方（也便是往人脸）的方位便是Z轴的正方位了。把座标轴的方位弄清楚了，上面的方式就可以正确的应用了。

假如你感觉上面的解释依然太过度枯燥乏味抽象性，那就来举个日常生活中的事例来对应1下3个rotate特性（rotateX、rotateY、rotateZ）吧：

以下图：体操演出－绕着X轴转动便是rotateX（单杠便是X轴）

以下图：钢管舞演出－绕着Y轴转动便是rotateY（钢管便是Y轴）

以下图：转回旋转－绕着Z轴在转动便是rotateZ（想像有1根绳索从转盘的管理中心穿过，图不太好找＝＝）

perspective特性

perspective的汉语意思是：透視，视角！该特性用来激活1个三d室内空间。

当为元素界定perspective特性时，其子元素都会得到透視实际效果（应用了三d转换的元素）。因此1般来讲perspective特性都运用在父元素上，大家能够把这个父元素称为舞台元素。

只看解释将会還是无法了解，大家還是用案例讲话吧：

从上图能够看出，div1是div2的父元素，刚开始大家给div2元素提升转动transform:rotateX(50deg)的情况下，只觉得div2在平面上被’缩小’了，沒有三d的实际效果，随后当大家给父元素div1提升perspective: 150px;的情况下，立马就可以看到三d的实际效果了，体会到他的奇异的地方了吧。

此外，perspective的赋值也1直是个谜，历经我的数次查阅和检测，得出了1下几个结果：

赋值为none或不设定，就沒有三d室内空间。
赋值越小，三d实际效果就越显著，也便是你的双眼越挨近真三d。
貌似当赋值为元素的宽度时，视觉效果实际效果较为好。

transform-style

transform-style特定嵌套循环元素怎样在三d室内空间中展现。

transform-style: flat | preserve⑶d

flat是默认设置值，表明全部子元素在2D平面展现；preserve⑶d表明全部子元素在三d室内空间中展现。因而，大家要想完成1些三d实际效果的情况下，transform-style: preserve⑶d是少不上的。1般而言，该申明运用在三d转换的弟兄元素们的父元素上，大家能够叫它器皿。

transform-origin

transform-origin用来更改元素的原点部位。

它的赋值方法有许多种，下面大家根据案例（把情况为黄色的div顺时针转动45deg）来详细介绍1下它的常见赋值方法：

transform-origin:center（默认设置值，等额的于：center center/ 50% 50%）

transform-origin:top（等额的于：top center/center top）

transform-origin:bottom（等额的于：bottom center/center bottom）

transform-origin:right（等额的于：right center/center right）

transform-origin:left（等额的于：left center/center left）

transform-origin:top left（等额的于：left top）

同理，还能够设定为：transform-origin:top right（右上角为原点）、transform-origin:bottom right（右下角为原点）、transform-origin:bottom left（左下角为原点）

绘图立方体实际效果

各位看官等不如了吧，讲了那末多’空话’，本篇文章内容的重头戏终究来了！

dom构造

<div class="rect-wrap">   //舞台元素，设定perspective，让其子元素得到透視实际效果。
    <div class="container">    //器皿，设定transform-style: preserve⑶d，让其子元素在三d室内空间展现
        <div class="top slide"></div>   //立方体的6个面
        <div class="bottom slide"></div>
        <div class="left slide"></div>
        <div class="right slide"></div>
        <div class="front slide"></div>
        <div class="back slide"></div>
    </div>
</div>

css编码

针对舞台元素

.rect-wrap {
    position: relative;
    perspective: 1600px;
}

针对器皿

.container {
    width: 800px;
    height: 800px;
    transform-style: preserve⑶d;
    transform-origin: 50% 50% 200px; //设定3d室内空间的原点在平面管理中心再向Z轴挪动200px的部位
}

立方体的每一个面

.slide {
    width: 400px;
    height: 400px;
    position: absolute;  //精准定位
}

立方体顶面

.top {
    left: 200px;
    top: ⑵00px;
    transform: rotateX(⑼0deg);
    transform-origin: bottom;
}

立方体底面

.bottom {
    left: 200px;
    bottom: ⑵00px;
    transform: rotateX(90deg);
    transform-origin: top;
}

立方体左边

.left {
    left: ⑵00px;
    top: 200px;
    transform: rotateY(90deg);
    transform-origin: right;
}

立方体右面

.right {
    left: 600px;
    top: 200px;
    transform: rotateY(⑼0deg);
    transform-origin: left;
}

立方体前面

.front {
    left: 200px;
    top: 200px;
    transform: translateZ(400px);  //立方体前面正对着显示屏，因此无需转动，只需向Z轴前挪动间距
}

立方体后边

.back {
    left: 200px;
    top: 200px;
    transform: translateZ(0);   //立方体后边正对着显示屏，因此无需转动，只需向Z轴后挪动间距
}

最终别忘了给每一个不一样面再加照片，部位甚么的再略微调1下，这个炫酷的立方体就大获全胜了。

加动漫

最终大家还要想这个立方体自身动起来，我界定了1个动漫，看官们能够试试。

@keyframes rotate-frame {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(180deg);
    }
    20% {
        transform: rotateX(⑴80deg) rotateY(180deg);
    }
    30% {
        transform: rotateX(⑶60deg) rotateY(180deg);
    }
    40% {
        transform: rotateX(⑶60deg) rotateY(360deg);
    }
    50% {
        transform: rotateX(⑴80deg) rotateY(360deg);
    }
    60% {
        transform: rotateX(90deg) rotateY(180deg);
    }
    70% {
        transform: rotateX(0) rotateY(180deg);
    }
    80% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    90% {
        transform: rotateX(90deg) rotateY(0);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}

最终把这个动漫用到这个立方体的器皿元素上，就OK了：

.container{
    animation: rotate-frame 30s linear infinite;
}

必须编码的同学能够点一下此处免费下载：demo

总结

总而言之，在我学习培训CSS3的全过程中，见到了很多的新特点，也学会了怎样应用，可是我想说的是大家无论要学会如何应用，更要去了解每行编码为何造成对应的实际效果，非常是针对三d transform，大家要从压根去了解了三d室内空间，才可以更好的去把握它的每个特性值可以带来的实际效果。

这篇文章内容內容略微有点多，自身纪录这篇文章内容的另外又对这个实际效果学习培训推进了1篇，還是蛮高兴哒。另外也期待能对各位看官在之后学习培训三d transform的路面上起到1点点功效！

CSS3 三d立方体实际效果示例－transform也但是这般

为您推荐