我有一个为移动图片查看而创建的 coverflow 类型图像库。第一次迭代在这里： http: //codepen.io/jasonmerino/pen/Fsloq。

我已经连接了触摸事件，对于 iPhone 和 iPad 上的移动 Safari 来说一切似乎都很顺利，但是当我在 iPhone 或 iPad 上的 Chrome 上查看它时，图像在 CSS translate3d 的一部分中消失，该部分将图像移动到两侧。

我已经添加了-webkit-backface-visibility: hidden;包含滑动器的所有标记，但这并不能修复我的图像正在执行的消失行为。

我在这里缺少什么？任何帮助，将不胜感激。谢谢！

我搜索了一些类似的问题，但找不到解决我的问题的方法，所以就在这里。

我正在尝试创建一个简单的翻盖盒。

1. 按下盒子并翻转到背面。

2. 再次按下盒子并翻转回正面。

我的问题是翻盖看起来很糟糕，一旦翻到背面，翻盖卡就不会再翻回正面。我刚刚开始学习 SASS，我正在制作这张翻转卡来获得一些使用 SASS mixin 的经验。一旦我开始工作，我就会清理它。

这是我当前的代码。

HTML：

 <div class="flip3D">
      <div class="front">Front Box</div>
      <div class="back">Back Box</div>
 </div>

CSS（SASS）：

@mixin flipCard($width, $height, $color) {
  width: 0;
  height: 0;
  margin: 10px;
  //display: block;
  //display: inline-block;
  float: left;

  .front {
    position: absolute;
    -webkit-transform: perspective(600px) rotateY(0deg);
    transform: perspective(600px) rotateY(0deg);
    background: $color;
    width: $width;
    height: $height;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform .5s linear 0s;
    transition: transform .5s linear 0s;    
    //z-index: 1002; 
  }

  .back {
    position: absolute;
    -webkit-transform: perspective(600px) rotateY(180deg); …

我想添加 2 个过渡变换

但我想在第一次转换结束后开始第二次转换

元素应该缓慢地到达一个点，然后它应该到达另一个点

transform: translate(0%, 300%), translate(15%, -136%);

css 中的补间到底是什么以及我们在哪里使用它。当我在网上搜索相关内容时，我所知道的是“姿势到姿势选项是在整个序列中创建一些关键帧，然后填充间隙。填充这些间隙被称为中间或补间”。有人可以用示例代码片段向我解释一下吗？

我正在尝试向六边形添加阴影clip-path。由于通常的box-shadow( 和filter:drop-shadow()) 不适用于剪辑路径，因此我尝试在下面使用更大的伪元素来伪造效果。该方法取自此处，在一个更简单的示例中效果很好：

body {
  background-color: gray;
}

.rectangle {
  margin: 10%;
  position: absolute;
  background: white;
  width: 80%;
  padding-top: 25%;
}

.rectangle::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(10px) brightness(20%);
  transform: scale(1.1);
  z-index: -1;
  background-color: black;
}

<div class="rectangle">
</div>

然而，对剪切路径六边形使用完全相同的方法会失败。这个粗略的草图显示了所需的效果：

相反，我得到：

body {
  background-color: gray;
}

.hexagon {
  width: 20%;
  padding-top: 25%;
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, …

在梳理了SVG 规范以及诸如此类的指南之后，我仍然在努力理解链接变换的工作原理。

精选相关报价

\n

When you apply the transform attribute to an SVG element, that element\n gets a "copy" of the current user coordinate system in use.

\n

And:

\n

When transformations are chained, the most important thing to be aware\n of is that, just like with HTML element transformations, each\n transformation is applied to the coordinate system after that system\n is transformed by the previous transformations.

\n

And: …

我正在尝试像绿色盒子一样改变我的 div 。

我想要获得 3D 变换，而不是 mask ：

我找到了使用此生成器的方法，但 css 代码在我的小提琴上不起作用：

/*transform css3*/ 
#screen { 
    transform: scale(1.0) scaleZ(1.0) rotateX(-16deg);
    transform-origin: 0% 0%;
    perspective: 450;
    perspective-origin: 100% 50%;
}

/*transform css3*/ 
#screen { 
    transform: scale(1.0) scaleZ(1.0) rotateX(-16deg);
    transform-origin: 0% 0%;
    perspective: 450;
    perspective-origin: 100% 50%;
}

body {
    height:100%;
    padding:0;
    margin:0;
}

#mask {
    background:url(https://i.stack.imgur.com/cBK0O.png) no-repeat;
    background-size:350px;
    height:200px;
    position:relative;
}

#screen:hover {
    background:url(https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg);
    background-size:100%;
}

#screen {
    position:absolute;
    bottom:38px;
    background:red;
    opacity:0.6;
}
   
#screen { 
    left:70px;
    width:240px;
    height:calc(240px * 9 / …

我正在尝试创建带有变换旋转属性的摆动按钮，它在 Opera 和 Chrome 浏览器中工作正常，但在 Firefox 中它在按钮边框中创建奇怪的像素问题：

我的按钮和摆动关键帧的 css 代码

.RedButton {
  background-color: #bc0000;
  border-radius: 7px;
  border: 1px solid #bc0000;
  display: inline-block;
  cursor: pointer;
  color: #fff !important;
  font-family: Arial;
  font-size: 30px;
  font-weight: bold;
  padding: 7px 24px;
  text-decoration: none;
  margin-top: 15px;
  animation: swing 5s infinite;
  -moz-animation: swing 5s infinite;
  transition: 0.2s;
  -moz-transition: 0.2s;
}

@-moz-keyframes swing {
  20%,
  60% {
    -moz-transform: rotate(5deg);
  }
  40%,
  80% {
    -moz-transform: rotate(-5deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

@keyframes swing {
  20%,
  60% { …

背景

我\xe2\x80\x99m 喜欢 SVG2 中扩展的 CSS 支持。不用一遍又一遍地重写属性，这很好。所以我\xe2\x80\x99一直在将项目中的一些代码从SVG属性转换为CSS。其中大部分效果都很好。

当谈到转换时，如果您熟悉 CSS 转换在 HTML 中的工作方式，那么事情可能会显得很棘手。（这对于rotate()转换尤其如此，这是这个问题的焦点。） \xe2\x80\x99s 因为 SVG 没有 \xe2\x80\x99t 具有 HTML 的 \xe2\x80\x9c 自动流 \xe2\x80\x9d做。

换句话说，当你有一堆 HTML 元素时，它们会一个接一个地根据盒模型自动布局。

SVG 中没有这样的 \xe2\x80\x9cautomatic\xe2\x80\x9d 或 \xe2\x80\x9cdefault\xe2\x80\x9d 布局。因此，SVG 转换默认为从原点计算。（0,0用户坐标中的\xe2\x80\x99s）。

近乎完美的解决方案

对于大多数元素，\xe2\x80\x99 有一个简单的解决方案：很棒的 CSS 属性transform-box。在大多数情况下，使用以下 CSS 将允许您以与 HTML 元素几乎相同的方式转换 SVG 元素：

/* whatever elements you want to transform */\nrect, polygon {      \n    transform-box:    fill-box;  \n    transform-origin: center center;  /* or `top …

我正在尝试创建一个带有锯齿状边缘的盒子,它实际上可以用作HTML元素,并且可以调整大小等等.

最后让我的头围绕着边框图像,让它看起来很漂亮,然后当我旋转它时,它在边框图像和主要填充之间产生了一个间隙:

我用Google搜索了一下,并找到了一个答案,告诉别人设置

-webkit-backface-visibility: hidden;

这清除了它,但显然只在webkit浏览器中.

我也尝试过使用-moz-backface-visibility,但它没有在Firefox中清除问题.

有什么建议？

的jsfiddle

e:我实际上认为我可以通过设置背景颜色来修复它,然后设置background-clip为padding-box,但老实说它只是让我处于相同的位置.