perspective(3D透视属性)属性体验

目前只的safari支持(Available in Safari 4.0.3 and later running)

apple官方解释:

Specifies a perspective projection matrix.
perspective(depth)

Parameters
depth
The distance, in pixels, of the z=0 plane from the viewer.

Discussion
This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer’s position.
The viewable area is the region bounded by the four edges of the viewport (the portion of the browser window used for rendering the webpage between the viewer’s position and a point at a distance of infinity from the viewer).
Lower values for this property give a more flattened pyramid and therefore a more pronounced perspective effect. A value of 1000 pixels gives a moderate amount of foreshortening, and a value of 200 pixels gives an extreme amount
大概意思:从观察者到Z轴平面的距离,单位px(3D效果是由我们人眼和物体之间距离产生的,所以不同的depth值会有不同的纵深效果),还是用效果来说吧。

代码如下:

<div style=” -webkit-perspective:500;”>
<img style=”-webkit-transform:rotateY(40deg); -webkit-transform-origin:right center” src=”http://drmcmm.baidu.com/media/id=rHRznHRdn6&gp=403&time=nHc3rHbLn1Rzn0.jpg” />
</div>

该属性只会对子元素起作用,而对本身没有影响。
子元素要配合旋转效果才能看到效果(^^平面怎么也看不到纵深效果哈),并且指定-webkit-transform-origin否则随着父节点的定宽会出现奇怪效果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值