第101天:CSS3中transform-style和perspective

一、transform-style

1、transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现

有两个属性值:flatpreserve-3d

transform-style属性的使用语法非常简单: transform-style: flat | preserve-3d

其中flat值为默认值,表示所有子元素在2D平面呈现。

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

  如果对一个元素设置了transform-style的值为flat,则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上,而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d,它表示不执行平展操作,他的所有子元素位于3D空间中。

二、perspective属性

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投到一个2D视平面上。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并且变换结果中将不存在景深概念。

其实对于perspective属性,我们可以简单的理解为视距,用来设置用户元素3D空间Z平面之间的距离。而其效应由他的值来决定,值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻;反之,值越大,用户与3D空间Z平面距离越远,视觉效果就很小。 在3D变形中,对于某些变形,例如下面的示例演示的沿Z轴的变形,perspective属性对于查看变形的效果来说必不可少。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>3d</title>
 6     <style>
 7         .out{
 8             width: 500px;
 9             height: 500px;
10             border: 1px solid #000;
11             background-color: pink;
12             margin:100px auto;
13             transform: rotateY(60deg);
14             /*可以让里面的盒子保持3d效果,加给父盒子*/
15             transform-style: preserve-3d;
16         }
17         .in{
18             width: 300px;
19             height: 400px;
20             margin: 50px auto;
21             background-color: green;
22             transform: rotateX(130deg);
23         }
24     </style>
25 </head>
26 <body>
27     <div class="out">
28         <div class="in"></div>
29     </div>
30 </body>
31 </html>

运行效果:


三、backface-visibility属性

backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素,该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。

backface-visibility属性使用语法很简单:

backface-visibility: visible | hidden

该属性被设置为以下两个关键词之一:

  • visible:为backface-visibility的默认值,表示反面可见
  • hidden:表示反面不可见

案例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             background-color: deepskyblue;
 9         }
10         .box{
11             width: 300px;
12             height: 300px;
13             border:1px solid #000;
14             margin:100px auto;
15             position: relative;
16         }
17         .box::after,.box::before{
18             content:"";
19             position: absolute;
20             width: 100%;
21             height: 100%;
22             border-radius: 50%;
23             background-color: pink;
24             background: url("images/bg.png") no-repeat left top;
25             transition: 1s;
26             /*让盒子背面隐藏*/
27             backface-visibility: hidden;
28         }
29         .box::before{
30             transform: rotateY(-180deg);
31         }
32         .box::after{
33             background-position: right top;
34         }
35         .box:hover::before{
36             transform: rotateY(0deg);
37         }
38         .box:hover::after{
39             transform: rotateY(180deg);
40         }
41     </style>
42 </head>
43 <body>
44     <div class="box"></div>
45 </body>
46 </html>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。 如何让自己的网站也响应式Web设计,可以响...

2617
来自专栏HTML5学堂

揭秘PhotoShop中的点与像素

HTML5学堂:PhotoShop当中,存在着这样一个单位 —— 点。对于设计师们,估计再熟悉不过了,但是对于前端开发攻城狮们,稍有些郁闷,因为点并不会完全等于...

3605
来自专栏我和未来有约会

Silverlight初级教程-绘图布局

Silverlight初级教程 绘图布局 正如之前所说Blend是和flash很像的东西。在这里将介绍一下如何在Blend中绘图。 这里的Blend中“舞台...

1878
来自专栏程序员阿凯

为 DP 设计布局

1365
来自专栏GIS讲堂

地图切片详解

地图切片很多做GIS的筒子都不陌生,但是其中的原理一直是马马虎虎,在此,就地图切片中的几个重要的概念做一个介绍,一则自己做个总结,二则希望能够帮助到有此困惑的战...

3402
来自专栏HTML5学堂

CSS3的loading制作,让页面加载时不再单调

页面的loading效果一直都是个比较重要的制作,往往一个好的加载效果可以有效的提升用户体验。而实际开发中,loading效果具体该如何制作?前端工程师又会有哪...

3889
来自专栏成长道路

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 ? lis...

2590
来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

2125
来自专栏前端儿

细说移动端 经典的REM布局 与 新秀VW布局

说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等...

2252
来自专栏Coco的专栏

你所不知道的 CSS 滤镜技巧与细节

1795

扫码关注云+社区