CSS3 3D旋转rotate效果实例介绍

对于“CSS3 3D旋转rotate效果实例介绍”，我将给出完整的攻略，具体如下：

1. 什么是CSS3 3D旋转rotate效果

CSS3中的的3D旋转旋转变换可以通过rotateX,rotateY，rotateZ 和rotate3d(deg,x,y,z)四种方法来实现。一般我们最常使用的是rotateX，rotateY，rotateZ 三种属性。

2. 实现CSS3 3D旋转rotate的代码

2.1 rotateX

rotateX 可以使元素像在X轴上旋转，例如：

.box{
  transform: rotateX(60deg);
}

2.2 rotateY

rotateY 可以使元素像在Y轴上旋转，例如：

.box{
  transform: rotateY(60deg);
}

2.3 rotateZ

rotateZ 可以使元素像在Z轴上旋转，例如：

.box{
  transform: rotateZ(60deg);
}

2.4 rotate3d

rotate3d 可以让元素在任意一个方向上旋转，既可以在X轴，也可以在Y轴，也可以在Z轴或者是任意的结果，例如：

.box{
  transform: rotate3d(1, 2, 3, 60deg);
}

其中，第一个参数表示x轴方向、第二个参数表示y轴方向、第三个参数表示z轴方向、第四个参数表示旋转度数。

3. CSS3 3D旋转rotate效果实例介绍

3.1 立方体旋转

.container {
  -webkit-perspective: 800px; /* 视角距离 */
  perspective: 800px;
}
.box {
  width: 200px;
  height: 200px;
  position: relative;
  margin: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 1s;
  transition: 1s;
}
.box:hover {
  -webkit-transform: rotate3d(1, 1, 1, 60deg);
  transform: rotate3d(1, 1, 1, 60deg);
}
.box .face {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 2em;
  color: #fff;
  font-weight: bold;
}
.box .face1 {
  background: #f00;
  -webkit-transform: rotateY(0deg) translateZ(100px);
  transform: rotateY(0deg) translateZ(100px);
}
.box .face2 {
  background: #0f0;
  -webkit-transform: rotateX(90deg) translateZ(100px);
  transform: rotateX(90deg) translateZ(100px);
}
.box .face3 {
  background: #00f;
  -webkit-transform: rotateY(90deg) translateZ(100px);
  transform: rotateY(90deg) translateZ(100px);
}
.box .face4 {
  background: #999;
  -webkit-transform: rotateY(-90deg) translateZ(100px);
  transform: rotateY(-90deg) translateZ(100px);
}
.box .face5 {
  background: #666;
  -webkit-transform: rotateX(-90deg) translateZ(100px);
  transform: rotateX(-90deg) translateZ(100px);
}
.box .face6 {
  background: #ff0;
  -webkit-transform: rotateX(180deg) translateZ(100px);
  transform: rotateX(180deg) translateZ(100px);
}

其中，container 用来设置立体旋转的中心，box 中用到了各种3d旋转属性，face 为面，可自行设置背景颜色和文字内容。

3.2 雪碧图切换

.sprite {
  width: 80px;
  height: 80px;
  background-image: url(img/sprite.png);
  background-repeat: no-repeat;
  display: inline-block;
  -webkit-animation: play .8s steps(10) infinite;
  animation: play .8s steps(10) infinite;
}
@-webkit-keyframes play {
  100% {
    background-position: -800px;
  }
}
@keyframes play {
  100% {
    background-position: -800px;
  }
}

其中，sprite 使用了CSS3的动画属性实现图片雪碧图的切换效果，background-position进行图片的位移。

以上就是“CSS3 3D旋转rotate效果实例介绍”的完整攻略和两个示例。