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点点功效!