©
本文档使用
php中文网手册 发布
perspective：none | <length>
默认值：none
适用于：变换元素
继承性：无
动画性：当值为<length>时
计算值：绝对长度或「none」
媒体：视觉
none：指定透视
<length>：指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值
当该属性值为「非none」时，元素将会创建局部堆叠上下文。
对应的脚本特性为perspective。
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-9.0 | 2.0-9.0 | 4.0-11.0 | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-2.3 | 18.0-34.0-webkit- |
| 10.0-11.0-ms- | 10.0-15.0-moz- | 12.0-35.0-webkit- | 9.0+ | 23.0+ | 9.0+ | 3.0-4.4.4-webkit- | 35.0+ | |
| Edge | 16.0+ | 36.0+ | 40.0+ |
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>perspective_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
.wrapper {
width: 200px;
height: 200px;
margin: 50px auto;
border: 1px solid #000;
-webkit-perspective: 50px;
perspective: 50px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: test 10s infinite;
animation: test 10s infinite;
}
.wrapper > div {
width: 180px;
height: 120px;
margin: 40px 10px;
background-color: #ccc;
-webkit-transform: rotatex(45deg);
transform: rotatex(45deg);
}
@-webkit-keyframes test {
from {
-webkit-perspective: 50px;
}
to {
-webkit-perspective: 300px;
}
}
@keyframes test {
from {
perspective: 50px;
}
to {
perspective: 300px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div>1</div>
</div>
</body>
</html>
点击 "运行实例" 按钮查看在线实例