[分享]css3扑克牌旋转角度

CSS3扑克牌的旋转角度：控制扑克牌的旋转方向和角度

/* HTML代码 */

<div class="poker">
  <div class="poker-inner">
    <div class="poker-front"></div>
    <div class="poker-back"></div>
  </div>
</div>

/* CSS代码 */

.poker {
  margin: 0 auto;
  width: 190px;
  height: 272px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.poker-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform .5s;
  -webkit-transition: -webkit-transform .5s;
}

.poker:hover .poker-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.poker-front, .poker-back {
  position: absolute;
  width: 184px;
  height: 266px;
  left: 3px;
  top: 3px;
  background-color: #fff;
  box-shadow: 1px 1px 2px #888;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
}

.poker-back {
  background-image: url("back.png");
}

.poker-front {
  background-image: url("front.png");
} 

CSS3扑克牌旋转角度可以通过transform和transition属性实现，transform属性控制旋转方向和角度，transition属性控制过渡效果的时间和速度。

在上面的代码中，首先定义了一个class叫作.poker，设置它的宽度、高度、位置和3D效果；接着定义了一个class叫作.poker-inner，它作为容器用来容纳.poker-front和.poker-back两个div元素；然后是定义.poker:hover .poker-inner的样式，当鼠标悬停在.poker元素上面时，.poker-inner元素就会发生旋转，连同子元素.poker-front和.poker-back一起旋转。.poker-front和.poker-back两个div元素则用来放置扑克牌的正反面图片，div的背景颜色可以通过background-color属性来设置。

需要注意的是，backface-visibility属性用来控制元素的背面是否可见，这个属性是新加入的CSS3属性，可以减少浏览器的渲染负担，提高性能。同时，-webkit-backface-visibility和-moz-backface-visibility属性分别是兼容webkit浏览器和firefox浏览器时使用的。

以上是基本的CSS3扑克牌旋转角度的代码和解释，有兴趣的编程爱好者可以自己调节使用，创造独特的3D效果。