您的位置：首页 > Web前端 > CSS

CSS3动画之透视

2015-09-21 22:32 609 查看

若在x,y轴rotate90度，其实是线，不显示，按近大远小的透视关系可用 perspective:数值开启透视；

默认以中间线为旋转基线，可以用transform-origin来设置旋转基线

在z轴上的平移（translateZ）实际上，负值是越来越小，正值越来越大

<div>
<img src="image/cat.jpg" alt=""/>
</div>

div{
width: 100px;
height: 200px;
perspective: 300px; /*开启透视*/
}
img{
/*-webkit-transform: rotateX(30deg);
-moz-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
transform: rotateX(30deg);*/
transform-origin: center bottom;
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航