CSS perspective 3D rotateXYZ

CSS perspective 3D rotateXYZ

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

.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>