知识问答

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

发布时间：2026-05-09 23:53:08 浏览量：0

对于“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进行图片的位移。