(三) cardGame-扑克牌背面布局

制作一个简单的翻牌游戏， 使用HTML5/CSS3设计界面, Javascript翻牌对比； 麻雀虽小，五脏俱全, 此项目将CSS中常见的技术应用在项目中，使用JavaScript原生开发，设计简单，便于快速掌握CSS3和JavaScript的用法; 某些知识点再通过其它视频或文档去了解，事半功倍。

扑克牌背面布局

1. 扑克牌背面布局

• 在背面div.card-back中图片的位置要放在四个角上面
• 蜘蛛图片需要放在中间

/* 背面图片布局 */

/* 使用绝对位置 */
.cobweb {
    position: absolute;
    width: 45px;
    height: 45px;
}

如图所示

• 四个角上的图片, 使用了旋转

/* 使用绝对位置 */
.cobweb {
    position: absolute;
    width: 45px;
    height: 45px;
}
/* 四个角上的图片 */
.cobweb-top-left {
    top: 0;
    left: 0;
    transform: rotate(270deg);
}
.cobweb-top-right {
    top: 0;
    right: 0;
}
.cobweb-bottom-left {
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}
.cobweb-bottom-right {
    bottom: 0;
    right: 0;
    transform: rotate(90deg);
}

如图所示

• 蜘蛛样式, 将前面的旋转动画先注释，后面需要点击时再翻牌
• spider样式主使用了align-self, 因父元素设置的display是flex

.card:hover .card-back {
    /* transform: rotateY(-180deg); */
}
.card:hover .card-front {
    /*  transform: rotateY(0); */
}


.spider {
    align-self: flex-start;
    transform: translateY(-20px);
}

• 增加动画，当鼠标放上去时，图片有所变化

 /* 背面图片布局 */

/* 使用绝对位置 */
.cobweb {
    position: absolute;
    width: 45px;
    height: 45px;

    /* 当高度和宽度变化时的动画 */
    transition: width 100ms ease-in-out, height 100ms ease-in-out;

}
/* 四个角上的图片 */
.cobweb-top-left {
    top: 0;
    left: 0;
    transform: rotate(270deg);
}
.cobweb-top-right {
    top: 0;
    right: 0;
}
.cobweb-bottom-left {
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}
.cobweb-bottom-right {
    bottom: 0;
    right: 0;
    transform: rotate(90deg);
}

.spider {
    align-self: flex-start;
    transform: translateY(-20px);

    /* 蜘蛛transform属性更改时的动画 */
    transition: transform 100ms ease-in-out;
}

/* 鼠标放在背面时.spider时transform的值改变 */
.card-back:hover .spider {
    transform: translateY(0);
}
/* 鼠标放在背面时.cobweb时width和height的值改变 */
.card-back:hover  .cobweb {
    width: 55px;
    height: 55px;
}

本篇中我们使用css动画制作了扑克牌的背面，下一篇中设计扑克牌正面样式