马黑黑 发表于 2022-1-17 13:56

CSS：3d旋转简单实现

本帖最后由 马黑黑 于 2022-1-17 18:21 编辑

代码有注释说明：

<style>

.out-box { /* 外框 - 翻转主体 */
      margin: 20px auto;
      width: 400px; /* 高宽尺寸与内元素至少保持基本一致 */
      min-height: 300px;
      transform-style: preserve-3d; /* 设定3d旋转（不设定则为2d） */
      transition: 1.5s; /* 翻转动画时长 */
}

.out-box:hover {/* 鼠标响应 - 触发自身翻转动作 */
      transform: rotateY(180deg);/* 指定 rotate 变换轴为 Y 轴 */
      cursor: pointer;
}

.front-box, .back-box {/* 内元素 - 共同属性 */
      position: absolute;/* 绝对定位*/
      left: 0;
      right: 0;
      padding: 10px;
      width: 400px;
      height: 300px;
      backface-visibility: visible;/* 元素不面向屏幕时是否可见 */
}

.front-box { /* 内元素：正面 */
      background: skyblue;
}
.back-box { /* 内元素：反面 - 它要反转，这样主体旋转后才能阅读 */
      background: forestgreen;
      transform: rotateY(180deg);
}

</style>

<div class="out-box">
      <div class="front-box">正面</div>
      <div class="back-box">背面</div>

</div>

红影 发表于 2022-1-17 16:04

这个翻转很奇特，好看{:4_187:}

红影 发表于 2022-1-17 16:05

把主楼的代码放出来看看

<style>

.out-box { /* 外框 - 翻转主体 */
      margin: 20px auto;
      width: 400px; /* 高宽尺寸与内元素至少保持基本一致 */
      min-height: 300px;
      transform-style: preserve-3d; /* 设定3d旋转（不设定则为2d） */
      transition: 1.5s; /* 翻转动画时长 */
}

.out-box:hover {/* 鼠标响应 - 触发自身翻转动作 */
      transform: rotateY(180deg);/* 指定 rotate 变换轴为 Y 轴 */
      cursor: pointer;
}

.front-box, .back-box {/* 内元素 - 共同属性 */
      position: absolute;/* 绝对定位*/
      left: 0;
      right: 0;
      padding: 10px;
      width: 400px;
      height: 300px;
      backface-visibility: visible;/* 元素不面向屏幕时是否可见 */
}

.front-box { /* 内元素：正面 */
      background: skyblue;
}
.back-box { /* 内元素：正面 - 它要反转，这样主体旋转后才能阅读 */
      background: forestgreen;
      transform: rotateY(180deg);
}

</style>

<div class="out-box">
      <div class="front-box">正面</div>
      <div class="back-box">背面</div>

</div>

红影 发表于 2022-1-17 16:07

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

马黑黑 发表于 2022-1-17 16:15

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

同一个原理

红影 发表于 2022-1-17 16:42

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

这个旋转很漂亮。

马黑黑 发表于 2022-1-17 17:35

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

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

绿叶清舟 发表于 2022-1-17 19:32

本帖最后由 绿叶清舟 于 2022-1-17 21:00 编辑 <br /><br /><style>

.out-box { /* 外框 - 翻转主体 */
      margin: 20px auto;
      width: 120px; /* 高宽尺寸与内元素至少保持基本一致 */
      min-height: 120px;
      transform-style: preserve-3d; /* 设定3d旋转（不设定则为2d） */
      transition: 1.5s; /* 翻转动画时长 */
}

.out-box:hover {/* 鼠标响应 - 触发自身翻转动作 */
      transform: rotateX(-180deg);/* 指定 rotate 变换轴为 Y 轴 */
      cursor: pointer;
}

.front-box, .back-box {/* 内元素 - 共同属性 */
      position: absolute;/* 绝对定位*/
      left: 0;
      right: 0;
      padding: 10px;
      width: 120px;
      height: 120px;
      backface-visibility: visible;/* 元素不面向屏幕时是否可见 */
}

.front-box { /* 内元素：正面 */
      background: skyblue;
}
.back-box { /* 内元素：反面 - 它要反转，这样主体旋转后才能阅读 */
      background: forestgreen;
      transform: rotateX(-180deg);
}

</style>

<div class="out-box">
      <div class="front-box"><img width="120" height="120" src="https://www.huachaowang.com/data/attachment/forum/202201/17/193017hhy1yywitn7y1rpy.jpg" border="0"></div>
      <div class="back-box"><img width="120" height="120" src="https://www.huachaowang.com/uc_server/data/avatar/000/00/71/30_avatar_middle.jpg" border="0"></div>

</div>

小辣椒 发表于 2022-1-17 19:33

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

马黑黑 发表于 2022-1-17 19:58

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

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

小辣椒 发表于 2022-1-17 20:05

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

太好了，掌声，鲜花一起送上{:4_199:}{:4_204:}

马黑黑 发表于 2022-1-17 21:00

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

谢谢

绿叶清舟 发表于 2022-1-17 21:01

这个负值没有用啊

马黑黑 发表于 2022-1-17 21:02

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

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

绿叶清舟 发表于 2022-1-17 21:03

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

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

红影 发表于 2022-1-17 21:09

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

现在已经很神奇了呢。

马黑黑 发表于 2022-1-17 21:09

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

还算过得去

红影 发表于 2022-1-17 22:22

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

黑黑要求太高{:4_173:}

马黑黑 发表于 2022-1-17 23:04

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

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

红影 发表于 2022-1-18 13:31

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

我没见过理想的，我就觉得现在的就挺好呢{:4_173:}
页: [1] 2
查看完整版本: CSS：3d旋转简单实现