transform-style特性是三d室内空间1个关键特性,特定嵌套循环元素怎样在三d室内空间中展现。他关键有两个特性值:flat和preserve⑶d。
transform-style特性的应用英语的语法十分简易:
CSS Code拷贝內容到剪贴板
- transform-style: flat | preserve⑶d
在其中flat值为默认设置值,表明全部子元素在2D平面展现。preserve⑶d表明全部子元素在三d室内空间中展现。
也便是说,假如对1个元素设定了transform-style的值为flat,则该元素的全部子元素都将被平展到该元素的2D平面中开展展现。沿着X轴或Y轴方位转动该元素将致使坐落于正或负Z轴部位的子元素显示信息在该元素的平面上,而并不是它的前面或后边。假如对1个元素设定了transform-style的值为preserve⑶d,它表明不实行平展实际操作,他的全部子元素坐落于三d室内空间中。
transform-style特性必须设定在父元素中,而且高于任何嵌套循环的形变元素。最终,大家应用1个旋转的事例,来加深1下对transform-style特性的印象:
HTML模版
XML/HTML Code拷贝內容到剪贴板
- <div class="wrap">
- <div class="spin">
- <div class="rotate">
- <img src="images/cardKingClub.png" alt="" width="142" height="200" />
- </div>
- </div>
- </div>
- <div class="wrap">
- <div class="spin">
- <div class="rotate three-d">
- <img src="images/cardKingClub.png" alt="" width="142" height="200" />
- </div>
- </div>
- </div>
CSS
CSS Code拷贝內容到剪贴板
- .wrap {
- width: 500px;
- height: 300px;
- margin: 30px auto;
- position: relative;
- background: url(images/bg-grid.jpg) no-repeat center center;
- background-size: 100% 100%;
- }
-
- @keyframes spin{
- 0%{
- transform:rotateY(0deg)
- }
- 100%{
- transform:rotateY(360deg)
- }
- }
- .spin {
- width: 142px;
- height: 200px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -72px;
- margin-top: -101px;
- border: 1px dashed orange;
- cursor: pointer;
- transform-style: preserve⑶d;
- }
-
- .spin:hover{
- animation:spin 5s linear infinite;
- }
- .rotate {
- background: url(images/cardKingClub.png) no-repeat center;
- background-size: 100% 100%;
- border: 5px solid hsla(50,50%,50%,.9);
- transform: perspective(200px) rotateY(45deg);
- }
- .rotate img{
- border: 1px solid green;
- transform: rotateX(15deg) translateZ(10px);
- transform-origin: 0 0 40px;
- }
-
- .three-d {
- transform-style: preserve⑶d;
- }
非常申明:以便节约篇数,编码中CSS3特性编码省去了各访问器的独享前缀,在具体实际操作中,必须将各访问器前缀再加,才会合理果。
其实际效果以下所示:
正如您所看到的,当元素设定.rotate设定了flat值时,其子元素img不容易依据translateZ()值摊开,而在同1平面转动,如上图上一部分所示;当元素.rotate设定了preserve⑶d值时,其子元素img会依据translateZ()值摊开,已不会层叠在1起,如上图下一部分所示。
有1点必须非常提示大伙儿,假如你的元素设定了transform-style值为preserve⑶d,就不可以以便避免子元素外溢器皿而设定overflow值为hidden,假如设定了overflow:hidden一样能够迫死子元素出現在同1平面(和元素设定了transform-style为flat1样的实际效果),以下图所示: