扑克牌以左上旋转css

左上旋转CSS是一种非常炫酷的扑克牌展示方式，在网页设计中非常常见，如果您也想学会如何使用左上旋转CSS来展示扑克牌，那么以下这些代码和样例将对您非常有帮助：

.card {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 225px;
    margin-right: -75px;
    margin-top: -112.5px;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.card .front,.card .back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.card .front {
    z-index: 1;
}
.card .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 0;
}
.card:hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 0;
}
.card:hover .back {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
    z-index: 1;
}
    

以上这段代码将使您的扑克牌在鼠标悬停时进行左上旋转，同时将正反面互换，非常漂亮和具有交互性。如果您需要使用这种效果在您的网页中展示扑克牌，只需要将代码复制粘贴到您的CSS文件中，然后HTML中添加以下代码即可：

div class="card">
    div class="front">
    img src="front.jpg">
    /div>
    div class="back">
    img src="back.jpg">
    /div>
    /div>
    

其中，front.jpg和back.jpg是您需要展示的扑克牌正反面图片，您只需要将图片路径替换成正确的路径即可。如果您需要展示多张扑克牌，只需要再复制上述HTML代码即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！