标签: css-transforms

我正在尝试用纯 html 和 css 制作一个选项卡式菜单。

选项卡菜单包含在页面的右侧，因此选项卡显示在菜单的左侧。我想我的那部分工作正常。

我正在努力解决的是让选项卡中的文本横向旋转，以免出现可笑的长水平选项卡。

这个小提琴http://jsfiddle.net/9gPXF/这里显示了我到目前为止所拥有的。我正在努力解决的问题是使选项卡的宽度保持可管理。

相关的css代码是这样的：

    #RightMenu #Tabs > li
    {
        display: block;
        width: 3em;
        height: 4em;
        line-height: 4em;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
    }

        #RightMenu #Tabs > li > span
        {
            display: inline-block;
            line-height: 1em;
            -webkit-transform: rotate(-90deg);
            text-align: center;
        }

这些元素包含我在 css 中旋转的lia 。span问题是 的实际宽度li必须足以容纳span或 文本中断。这很烦人，因为我必须使选项卡的宽度和高度足以容纳文本。

我应该如何修改样式才能使其正常工作？

更新：

我的想法可能完全错误。如果有人知道任何其他方法可以实现这项工作，我也会将其作为答案。

我想用 CSS3 构建一个动画旋转器。它的行为应该是这样的：

在最后一个状态之后，它应该像第一个状态一样重新开始。

我设法使用此处解释的技术创建圆圈： stackoverflow Question

现在，我如何在所描述的状态之间设置旋转器的动画？我不知道如何为剪辑矩形属性设置动画。我还猜想，如果使用 Clip-Poly（可能是三角形），效果会更好，但我也无法对其进行动画处理。

我设置perspective-origin: 50% 50%在主体上，所有沿 Z 轴移动的元素都以相对于文档高度的透视图显示。我想将透视原点设置为浏览器窗口的中间，这样当我垂直或水平滚动时它会更新视点。

有任何想法吗？你认为我必须使用 JavaScript 吗？

Safari 无法正确渲染 180 度旋转的元素。特别是有两个可以显示的示例（使用 Safari 9.1）：

1. 奇数宽度问题。您可以看到（查看边框）底部元素最初相对于其父 div 向右移动 1px，并在过渡时移动更多。
2. 宽度均匀的问题。最初看起来不错，但在过渡时也会向右移动 1px。

这是偶数情况下的 css（奇数情况下只是所有宽度和高度减去 1px）：

.no-overflow-container {
  width: 518px;
  height: 368px;
  margin: 10px;
  overflow: hidden;
}

.container {
  width: 368px;
  height: 368px;
  background: red;
  margin-right: 30px;
  -webkit-transition: margin 350ms;
  -moz-transition: margin 350ms;
  transition: margin 350ms;
}

.container:hover {
  margin-left: 150px;
}

.threed-container {
  width: 100%;
  height: 100%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  position: relative;
  box-sizing: border-box;
}

.faced-item {
  width: 100%;
  height: 100%;
  border: 1px solid black; …

我用文本旋转了一个 div 并想将其放置在左上角。我设法将其放置在顶部，但无法使其与左边缘对齐。我该怎么做呢？

.credit {
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-50%);
}

<div class="credit">
  Picture by Name
</div>

我还是一个初学者，很抱歉，如果这是一个愚蠢的问题，我会尽量保持简短和具体。

因此，我想使用 CSS 网格显示和变换比例属性在图像网格中创建缩小效果。

我得到的结果与期望的结果不同，我将在代码后面发布两者的图像。

这是我使用过的代码：

.meals-gallery {
  background-color: #000;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
  padding: 0;
}

.meals-gallery img {
  opacity: 0.7;
  transform: scale(1.15);
  transition: 0.5s;
  width: 100%;
}

.meals-gallery img:hover {
  opacity: 1;
  transform: scale(1.03);
}

<section class="meals-gallery">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
  <img src="http://placeholder.pics/svg/600x500" alt="">
</section>

图像在不透明度为 70% 时重叠，因此它们看起来很难看，即使我添加了要隐藏的溢出属性。

这是想要的效果：

这就是我所取得的成就：

先感谢您。

我可以在不扭曲图像的情况下实现这种效果吗？我尝试使用CSS的倾斜效果，但它以某种方式旋转图像并裁剪它的一半，我希望它保持原样，大小相同，但边缘像附加的图像一样，这是我的代码:

div.skewed {
  position: relative;
  height: 140px;
  transform: skew(-2deg) rotate(2deg);
  -webkit-transform: skew(-2deg) rotate(2deg);
  -moz-transform: skew(-2deg) rotate(2deg);
  overflow: hidden;
}

div.skewed > * {
  width: 110%;
  position: absolute;
  top: 50%;
  transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}

<div class="skewed">
  <img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
</div>

我有一个父级和一个子级div，其 id 和尺寸如下图所示：

<div id="clip"> \n  <div id="page"> \n     <!-- Content/Images here -->\n  </div>\n</div>\n

父div和子div的尺寸如下：

#clip {\n  height: 1000px;\n  width: 1414px;\n}\n\n#page {\n  height: 1000px;\n  width: 707px; \n}\n

现在我想将 的一侧从孩子的div处倾斜angle \xc3\xb8并剪掉 的右侧div，如下所示：

单独用 CSS 可以做到吗？

\n

限制：不能使用三角形边框 hack，#page 子项内的内容div不能倾斜，并且解决方案越少 hack，对所有内容都越好。我希望这可以通过 CSS3 转换来完成，但到目前为止我找不到方法。

\n

@ksav 的回答很接近，但它仍然使用具有绝对位置的伪 :before 元素的模糊技术。它不允许我消失div#page 的剪切部分，以便它看起来像这样：

我试图SVG path从它的中心旋转一个，但它不起作用

a {
  width: 40px;
  height: 40px;
  width: 40px;
  font-size: 1.5rem;
  padding: 1px;
  overflow: hidden;
  border: 1px solid black;
}

a:hover path {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

a path {
  transition: all .5s ease-in-out;
  transform-origin: center center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<a href="#" class="rounded-circle" data-toggle="tooltip" data-placement="left" title="Twitter" aria-label="Twitter">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="-250 -150 1000 1000" height="40px" width="40px">
        <path fill="#007bff" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 …

我对transform-origin财产的想法有点困惑，主要是它的用途。是否transform-origin仅适用rotate于 2D 变换？