css单词描述教学视频,perspective

perspective

观点

英 [pəˈspektɪv]   美 [pərˈspektɪv]

css perspective属性 语法

作用：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

语法：perspective: number|none

说明：number    元素距离视图的距离，以像素计。    none    默认值。与 0 相同。不设置透视。

注释：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

css perspective属性 示例

html>

#div1

{

position: relative;

height: 150px;

width: 150px;

margin: 50px;

padding:10px;

border: 1px solid black;

perspective:150;

-webkit-perspective:150; /* Safari and Chrome */

}

#div2

{

padding:50px;

position: absolute;

border: 1px solid black;

background-color: yellow;

transform: rotateX(45deg);

-webkit-transform: rotateX(45deg); /* Safari and Chrome */

}

HELLO

运行实例 »

点击 "运行实例" 按钮查看在线实例

热门推荐