CSS：3d旋转简单实现

马黑黑

代码有注释说明：

1. <style>
   
2. 
   
3. .out-box { /* 外框 - 翻转主体 */
   
4.         margin: 20px auto;
   
5.         width: 400px; /* 高宽尺寸与内元素至少保持基本一致 */
   
6.         min-height: 300px;
   
7.         transform-style: preserve-3d; /* 设定3d旋转（不设定则为2d） */
   
8.         transition: 1.5s; /* 翻转动画时长 */
   
9. }
   
10. 
    
11. .out-box:hover {  /* 鼠标响应 - 触发自身翻转动作 */
    
12.         transform: rotateY(180deg);  /* 指定 rotate 变换轴为 Y 轴 */
    
13.         cursor: pointer;
    
14. }
    
15. 
    
16. .front-box, .back-box {  /* 内元素 - 共同属性 */
    
17.         position: absolute;  /* 绝对定位  */
    
18.         left: 0;
    
19.         right: 0;
    
20.         padding: 10px;
    
21.         width: 400px;
    
22.         height: 300px;
    
23.         backface-visibility: visible;  /* 元素不面向屏幕时是否可见 */
    
24. }
    
25. 
    
26. .front-box { /* 内元素：正面 */
    
27.         background: skyblue;
    
28. }
    
29. .back-box { /* 内元素：反面 - 它要反转，这样主体旋转后才能阅读 */
    
30.         background: forestgreen;
    
31.         transform: rotateY(180deg);
    
32. }
    
33. 
    
34. </style>
    
35. 
    
36. <div class="out-box">
    
37.         <div class="front-box">正面</div>
    
38.         <div class="back-box">背面</div>
    
39. 
    
40. </div>

复制代码

红影

这个翻转很奇特，好看

红影

把主楼的代码放出来看看

正面

背面

红影

和那个错位时空里的应用一样，都是在反转时有个动态过程再转。

马黑黑

红影 发表于 2022-1-17 16:07
和那个错位时空里的应用一样，都是在反转时有个动态过程再转。

同一个原理

红影

马黑黑 发表于 2022-1-17 16:15
同一个原理

这个旋转很漂亮。

马黑黑

红影 发表于 2022-1-17 16:42
这个旋转很漂亮。

差个景深，也就是真3D需要很大的场景

绿叶清舟

小辣椒

黑黑，这个3D效果很漂亮，图片可以用吗？

马黑黑

小辣椒 发表于 2022-1-17 19:33
黑黑，这个3D效果很漂亮，图片可以用吗？

当然。它是容器，可以装图片

小辣椒

马黑黑 发表于 2022-1-17 19:58
当然。它是容器，可以装图片

太好了，掌声，鲜花一起送上

马黑黑

小辣椒 发表于 2022-1-17 20:05
太好了，掌声，鲜花一起送上

谢谢

绿叶清舟

这个负值没有用啊

马黑黑

绿叶清舟 发表于 2022-1-17 21:01
这个负值没有用啊

对应的应该可以，理论上是没问题的

绿叶清舟

马黑黑 发表于 2022-1-17 21:02
对应的应该可以，理论上是没问题的

八楼那个用了负值还是一个方向的

红影

马黑黑 发表于 2022-1-17 17:35
差个景深，也就是真3D需要很大的场景

现在已经很神奇了呢。

马黑黑

红影 发表于 2022-1-17 21:09
现在已经很神奇了呢。

还算过得去

红影

马黑黑 发表于 2022-1-17 21:09
还算过得去

黑黑要求太高

马黑黑

红影 发表于 2022-1-17 22:22
黑黑要求太高

不是啊，它就是没有达到理想的效果

红影

马黑黑 发表于 2022-1-17 23:04
不是啊，它就是没有达到理想的效果

我没见过理想的，我就觉得现在的就挺好呢