CSS3中透视perspective

1.3D坐标,其中黑框相当于屏幕,z轴正方形指向屏幕前方,y轴指向屏幕上方,x轴正向指向屏幕右方,三轴以屏幕中心为原点

在这里插入图片描述
2.perspective
在这里插入图片描述
perspective的值相当于从屏幕的侧面看,屏幕距离z轴正向(前方)的距离。
perspectiveOrigin: 可理解为视点的xy坐标,perspective则是z坐标,三者可以再三维中确定Z视点的唯一位置。(视点Z即相当于你的眼睛所在的位置)

3.perspective属性的两种书写
一种用在舞台元素上(动画元素们的共同父辈元素);第二种就是用在当前动画元素上,与transform的其他属性写在一起。如下代码示例:

//视点Z是 以 子元素的共同父元素 stage 为整体的

.stage {
    perspective: 600px;
}

//每个元素都有一个自己的视点

#stage .box {
    transform: perspective(600px) rotateY(45deg);
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值