标签: css-transforms

我有一个博客元素，它有 2 个子元素：.blog-header（包含背景图像）和 .blog-body。当将鼠标悬停在 .blog-header 上时，我希望图像能够完美缩放。但问题是：图像占据了 .blog-body 应该放置的空间

这是我的代码：

.blog {
  background: white;
  margin-top: 20px;
  border-top: 3px primary solid;
  border-bottom 3px solid #eee;
}
.blog .blog-header {
  overflow: hidden;
  z-index 90;
}
.blog .blog-header .blog-bg-header {
  height: 275px;
  background-position: center;
  background-size: cover;
  transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
}

<article class="blog">
  <header class="blog-header">
    <div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div> …

@keyframes my-animation {
    0% {
        transform: translate(0, 40%) scale(0);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1);
   }
   100% {
        transform: translateY(0%);
   }
}

我试图让我的元素弹出然后在 Y 轴上移动，但上面的方法不起作用。

我哪里错了？

我遇到了可能只是Chrome 中的一个错误，但我希望得到另一组关注，并希望告诉我我是否在这里遗漏了什么。

问题：

我有一些<li>标签分布在三个 CSS 列 ( column-count: 3) 上，每个项目都有一个transform属性。然后当我在这些<li>标签中转换子项时，不在第一列中的每个子项都消失了。

这是 CodePen 上的一个内置示例：https ://codepen.io/andyranged/pen/WMdrxR

同样，这仅发生在 Chrome 中。在此先感谢您提供的任何帮助！

无论我如何尝试，我都无法让该动画在 Safari 12 中正常工作。我已经尝试过供应商前缀等，但没有任何效果。

它在 Chrome 中运行良好。有人有主意吗？

<div class="spinners"></div>

这是CSS：

@keyframes spinx {
  0% {
    transform: rotate3d(0, 1, 1, 360deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 360deg);
  }
}
.spinners {
  display: block;
  width: 100%;
  height: 4rem;
  overflow: hidden;
  position: relative;
}
.spinners:before, .spinners:after {
  content: "";
  width: 4rem;
  height: 4rem;
  border: 3px solid red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2rem 0 0 -2rem;
  display: block;
  transform-origin: 50% 50% 0;
}
.spinners:before {
  animation: spinx …

我正在尝试增加材质复选框的大小。

transform似乎增加了材质复选框的大小。但是，我不确定这是否是实现这一目标的正确方法？

CSS

 ::ng-deep .mat-checkbox .mat-checkbox-frame {
     transform: scale(2);
 }

 ::ng-deep .mat-checkbox-checked .mat-checkbox-background {
     transform: scale(2);
 }

尝试点击此翻页卡背面链接的左侧在 Chrome 中不起作用。然而，当我将鼠标悬停在链接的右侧时，我会看到指针光标并能够与其交互：

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.card {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  display: inline-block;
}

.card .card-inner {
  position: relative;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
}

.card .card-inner .card-face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .card-inner .card-face.card-back {
  -webkit-transform: rotateY( 180deg); …