CSS参考手册
变换 | Transforms
perspective
该perspective
CSS属性决定在z = 0平面和用户之间的距离以便使所述3D定位的元素一些透视效果。z> 0的每个3D元素变大;,每个z <0的三维元素则变小。效果的强度由此属性的值决定。
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;
在用户后面的3D元素的部分,即z轴坐标大于perspective
CSS属性的值的那部分,不会被绘制。
消失点(vanishing point)默认放置在元件的中心,但它的位置可以使用perspective-origin
属性改变。
当此属性的值不为0
和none时,
就能使用该属性创建新的堆叠上下文。而且,在这种情况下,对象将作为它包含的position: fixed
元素的包含块。
Initial value |
none |
---|---|
Applies to |
transformable elements |
Inherited |
no |
Media |
visual |
Computed value |
the absolute length or none |
Animation type |
a length |
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
Creates stacking context |
yes |
语法
可能值
none
——是一个关键字,指示不需要应用透视变换。
<length>
——是给定用户到z = 0平面的距离的一个<length>
。它用于对元素及其内容应用透视变换。如果它为0
或负值,则不应用透视变换。
形式语法
none | <length>
实例
HTML内容
<table>
<tbody>
<tr>
<th><code>perspective: 250px;</code>
</th>
<th><code>perspective: 350px;</code>
</th>
<th><code>perspective: 500px;</code>
</th>
</tr>
<tr>
<td>
<div class="container">
<div class="cube pers250">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="cube pers350">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="cube pers500">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS内容
/* Shorthand classes for different perspective values */
.pers250 {
perspective: 250px;
}
.pers350 {
perspective: 350px;
}
.pers500 {
perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 200px;
height: 200px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
/* Make the table a little nicer */
th, p, td {
background-color: #EEEEEE;
padding: 10px;
font-family: sans-serif;
text-align: left;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Transforms Level 2The definition of 'perspective' in that specification. |
Editor's Draft |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
12-webkit10 (10) 45 |
(Yes)-webkit (Yes) |
10 (10)-moz 16 (16)1 |
10 |
15-webkit |
(Yes)-webkit |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
3.0-webkit |
(Yes)-webkit (Yes) |
10.0 (10)-moz 16.0 (16)1 |
8.1 |
(Yes)-webkit |
(Yes)-webkit |
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。