想要在旋转时显示元素的厚度

Posted 2023-03-06

【中文标题】想要在旋转时显示元素的厚度

【英文标题】：want to show the thickness of an element while it rotate

【发布时间】：2012-07-23 14:31:12

【问题描述】：

我通过 CSS 将一枚硬币沿 Y 轴旋转 90 度。有没有办法让我可以在硬币旋转后显示硬币的厚度，我想我可以在硬币沿 Y 轴旋转后缩放 Y，但这似乎不起作用。如果可能的话，请提出一些方法来做同样的事情。 link_on_js fiddle 相同。请使用 webkit 浏览器打开链接。

css

.coin 
    display: block;
    background: url("url-to-image-of-coin.jpg");
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 100%;
    transition: all 500ms linear;


.flip 
    transform: rotateY(180deg);

html

<div class="coin"></div>

jquery

$('.coin').click(function() 
    $(this).toggleClass('flip');
);

小提琴

http://jsfiddle.net/7EtLu/22/

【问题讨论】：

“硬币的厚度”是什么意思？它只是二维的，不存在真正的 z 轴。

因为我使用硬币的 2-D 图像但实际上硬币是 3-D 对象所以当我应该沿 Y 轴旋转它时我应该看到厚度以及具有逼真的效果.这可以用 css 本身完成吗？？

啊，好吧。我认为 CSS 不能满足您的要求。这看起来像是 Canvas 的任务。但我没有这方面的经验。

好吧，即使我不知道，谢谢你的时间 :)

【参考方案1】：

@joshnh 感谢提供的灵感，这里稍作修改使其看起来更像：

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front"></div>
      <div class="flip-card-thick"></div>
      <div class="flip-card-back"></div>
    </div>
  </div>

.flip-card 
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;


.flip-card-inner 
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background: transparent url(https://i.imgur.com/GPCt3mC.jpg) no-repeat;
  background-size: 100% 100%;
  border-radius: 100%;
  transition: transform 4s;
  transform-style: preserve-3d;



.flip-card-front, .flip-card-back, .flip-card-inner:before, .flip-card-inner:after  
  background-color: #a37131;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  overflow: hidden;
  z-index: 1;


.flip-card-inner:before 
  content: '';
  top: 0;
  left: 0;
  transform: rotateY(180deg) translateZ(1px);
  background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));


.flip-card-inner:after 
  content: '';
  top: 0;
  left: 0;
  transform: rotateY(180deg) translateZ(10px);
  background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));


.flip-card-front 
  background-color: #bbb;
  color: black;


.flip-card-back 
  background-color: #a37131;
  color: white;
  transform: rotateY(180deg) translateZ(11px);


.flip-card-thick 
  background-color: #a37131;
  background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
  bottom: 0;
  left: 130px;
  position: absolute;
  top: 0px;
  width: 10px;
  z-index: -10;
  transform: rotateY(-90deg);
  transform-origin: 100% 50%;


.flip-card:hover .flip-card-inner 
  transform: rotateY(180deg);

codepen

【参考方案2】：

您可以使用伪元素来产生类似的效果。这是一个例子：http://jsfiddle.net/joshnh/y7rQL/

<div class="coin"></div>

body 
    transform: perspective(500px);
    transform-style: preserve-3d;

.coin 
    background-image: url("http://www.coolemails4u.com/wp-content/uploads/2010/10/indian_rupee.png");
    background-size: 100% 100%;
    border-radius: 100%;
    height: 100px;
    margin: 50px auto;
    position: relative;
    transition: .5s linear;
    transform-style: preserve-3d;
    width: 100px;

.coin:after 
    background-color: #262626;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
    bottom: 0;
    content: '';
    left: 45px;
    position: absolute;
    top: 0;
    transform: rotateY(-90deg);
    transform-origin: 100% 50%;
    width: 5px;
    z-index: -10;

.coin:before 
    background-color: #262626;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
    border-radius: 100%;
    content: '';
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateZ(-5px);
    width: 100px;

.coin:hover 
    transform: rotateY(90deg);
​

另外，这是一个旋转 180 度的版本（虽然不是很好）：http://jsfiddle.net/joshnh/Bz22S/

【讨论】：

@joshnh 非常感谢你的回复真的很有帮助:) ..... 真的很棒你是怎么做到的......

@joshnh 我试图在我的大代码中使用你的方法，我的硬币 div 在其他 div 的大树中。似乎 Preserve-3d 属性不起作用，您能建议我在哪些情况下不维护 preserve-3d 并且 -webkit-transition-style 只是设置为 flat。请帮助

嗯，奇怪。可能值得问另一个问题？如果没有进一步的信息，很难知道发生了什么。

您好，这是 180 度以上旋转的固定版本，看起来与 90 度旋转一样好。 jsfiddle.net/t8gberzy/1 由于某种原因，我无法在 translateZ 的父元素中转换伪元素，所以布局没有那么苗条，但它可以工作并且看起来还不错。

一些解释：::before是硬币的背面，而::after模拟硬币的边缘。当您显着减慢转换速度时，这个技巧就很明显了。