先说下基础的知识点：

• perspective透视 我是理解成 视距 值 800px 格式

• transform: 变换 rotateX、rotateY、rotateZ //分别按照坐标系里的 X、Y、Z轴旋转如下图

translateX、translateY、translateZ //分别按照坐标系不同轴的方向移动相应的距离

偷懒不画图了

<section>
    <p></p>
    <p></p>
    <p></p>
</section>

为什么要求出红色线段呢？ 因为默认圆心是三角形最下面的面上 中间位置， 只有把旋转的轴往后拉、或者是把整体的容器往前拉，才能够在三角柱的中心旋转。

说到这里先贴代码：

section{ width: 400px; height: 200px; background-color: #000;
         -webkit-perspective:800px;margin: 100px auto;}
#box{
    width:100%; 
    height: 100%;  
    position: absolute; 
    -webkit-transform-style:preserve-3d; 
    -webkit-transform-origin: 50% center;
    -webkit-animation:as 10s  ease-out infinite;  -webkit-backface-visibility:hidden;
}
#box>p{
    width: 100%; 
    height: 100%; 
    position: absolute; 
    font-size: 100px; 
    text-align: center;
}
.m1{ 
    background-color: #f00; 
    -webkit-transform:rotateY(0deg) translateZ(115px);  }
.m2{ 
    background-color: #00f;
    -webkit-transform:rotateY(120deg) translateZ(115px); }
.m3{ 
    background-color: #0f0;
    -webkit-transform:rotateY(240deg)  translateZ(115px); }


@-webkit-keyframes as{
    0%{-webkit-transform:rotateY(0deg);}
    33%{-webkit-transform:rotateY(120deg);}
    66%{-webkit-transform:rotateY(240deg);} 
    100%{-webkit-transform:rotateY(359deg);}
    }

html部分

<section>
    <div id="box">
        <p class="m1">1</p>
        <p class="m2">2</p>
        <p class="m3">3</p>
    </div>
</section>

文章来源: css3-3d效果算法分享