用过渡，3D旋转, 3D平移等实现简单的立方体旋转
发布时间
阅读量：
阅读量
一，写法思路：
设置一个容器，里面嵌套6个项目分别代表6个面，
容器设置相对定位，3d景深，立体中心点，3d展示方式
其项目设置：一个项目作为底面，四个项目按照情况进行3d翻转，最后一个进行3d平移达到封顶面的效果
二，效果如下：
三，结构代码：
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</body>
四，没旋转之前的样子：
五， css代码如下
> 1. <style>
>
> 2. .box{
>
> 3. width: 300px;
>
> 4. height: 300px;
>
> 5. border: 1px solid #333;
>
> 6. /* 相对定位*/
>
> 7. position: relative;
>
> 8. margin: 100px auto;
>
> 9.
>
> 10. /* 设置景深*/
>
> 11. perspective: 12000px;
>
> 12.
>
> 13. /* 确定立体中心点*/
>
> 14. perspective-origin: 50% 50%;
>
> 15.
>
> 16. /* 表示在3D空间中展示 */
>
> 17. transform-style: preserve-3d;
>
> 18.
>
> 19. /*过渡 */
>
> 20. transition: all 8s;
>
> 21. }
>
> 22. .box>div{
>
> 23. width: 100px;
>
> 24. height: 100px;
>
> 25.
>
> 26. /*绝对定位 */
>
> 27. position: absolute;
>
> 28.
>
> 29. font-size: 20px;
>
> 30. font-weight: bold;
>
> 31. line-height: 100px;
>
> 32. text-align: center;
>
> 33. /*透明度*/
>
> 34. opacity: 0.5;
>
> 35.
>
> 36. }
>
> 37.
>
> 38. .box1{
>
> 39. top: 0px;
>
> 40. left: 100px;
>
> 41. background-color:red;
>
> 42.
>
> 43. /*设置当前项目旋转边为下 */
>
> 44. transform-origin: bottom;
>
> 45.
>
> 46. /* 围绕旋转边 逆时针 旋转90度*/
>
> 47. transform: rotateX(-90deg);
>
> 48. }
>
> 49. .box2{
>
> 50. top: 100px;
>
> 51. left: 0;
>
> 52. background-color: orange;
>
> 53.
>
> 54. /*设置当前项目旋转边为右 */
>
> 55. transform-origin: right;
>
> 56.
>
> 57. /*围绕旋转边 顺时针 旋转90度*/
>
> 58. transform: rotateY(90deg);
>
> 59. }
>
> 60. .box3{
>
> 61. top: 100px;
>
> 62. left: 100px;
>
> 63. background-color: skyblue;
>
> 64.
>
> 65. }
>
> 66. .box4{
>
> 67. top: 100px;
>
> 68. left: 100px;
>
> 69. background-color: green;
>
> 70.
>
> 71. /*z轴平移时，正值相当于向你靠近，负值远离你*/
>
> 72. transform: translateZ(100px);
>
> 73.
>
> 74.
>
> 75. }
>
> 76. .box5{
>
> 77. top: 100px;
>
> 78. left: 200px;
>
> 79. background-color: blue;
>
> 80.
>
> 81. /*设置当前项目旋转边为左 */
>
> 82. transform-origin: left;
>
> 83. /*围绕旋转边 逆时针 旋转90度*/
>
> 84. transform: rotateY(-90deg);
>
> 85. }
>
> 86. .box6{
>
> 87. top: 200px;
>
> 88. left: 100px;
>
> 89. background-color: purple;
>
> 90.
>
> 91. /*设置当前项目旋转边为上 */
>
> 92. transform-origin: top;
>
> 93.
>
> 94. /*围绕旋转边 顺时针 旋转90度*/
>
> 95. transform: rotateX(90deg);
>
> 96. }
>
> 97.
>
> 98. .box:hover{
>
> 99. /* 鼠标滑过时，沿着底面顺时针旋转720度*/
>
> 100. transform: rotateX(720deg);
>
> 101. }
>
> 102. </style>
>
>
>
>
> ```
>
>全部评论 (0)
还没有任何评论哟~