0
点赞
收藏
分享

微信扫一扫

CSS perspective 3D rotateXYZ

49路末班车 2022-06-30 阅读 40

CSS perspective 3D rotateXYZ

到今儿我好像才知道,原来 perspective 属性不是直接用在元素上的,而是用在其父元素上的。

CSS perspective 3D rotateXYZ_perspectiv

.clearfix::before{
content: " ";
clear: both;
display: block;
}
.card-holder{
width: 100%;
perspective: 600px ;
}
.card{
transition: all .3s;
float: left;
height: 300px;
background-color: #5fbfeb;
width: 30%;
margin: 0 1.5%;
display: block;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.card:hover{
transform: rotateX(10deg);
transition: all .3s;
}
<div class="card-holder clearfix">
<div class="card"></div>
<div class="card"></div>
<div class="card"> </div>
</div>


举报

相关推荐

0 条评论