标签: css-transforms

我有一个元素 3D 转换如下：

.foo {
  transform: rotateX(-30deg) rotateY(35deg);
}

现在我想通过 javascript 获取这些值。很容易得到3D矩阵：

var matrix = $('.foo').css('transform');
// return:
// matrix3d(0.819152, -0.286788, -0.496732, 0, 0, 0.866025, -0.5, 0, 0.573576, 0.409576, 0.709406, 0, 0, 0, 0, 1)

但是是否可以使用该矩阵计算 CSS，例如值 -30 和 35？我刚刚找到了针对2D 变换执行此操作的方法。

我想在 CSS 中实现这一点，对所有屏幕尺寸都有效：

从我的屏幕左侧到中间，背景应该是蓝色，从中间上到右下角，背景应该是白色。这是我已经得到的：

<style>
.wrapper {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #297fca;
}
.right {
    position: fixed;
    z-index: 2;
    top: -70%;
    right: -50%;
    background: #fff;
    width: 100%;
    height: 100%;
    transform: translateY(50%) rotate(45deg);
  }
</style>
...
 <div class="wrapper">
    <div class="right">
    </div>

  </div>

这适用于某些屏幕尺寸，但不是通用解决方案。我正在寻找仅使用 CSS 的解决方案。如果这是不可能的，SVG apporach 也可以。

提前致谢。

为什么动画会改变 z-index？

如果您查看 jsfiddle，您会看到红色图像位于顶部，但如果注释掉动画，则蓝色图像位于顶部。即使有动画，如何才能使蓝色图像始终位于顶部？

jsfiddle

超文本标记语言

<img class="blue" src="http://via.placeholder.com/200/0037ff">
<img class="red" src="http://via.placeholder.com/200/ff0010">

CSS

.red {
  -webkit-animation-name: red;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-name: red;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.blue {
  transform: translate(30%);
}

@keyframes red {
  from {
    transform: translate(50%);
  }
  to {
    transform: translate(0);
  }
}

任何帮助深表感谢！

我想用 CSS 构建一个“80 年代的 TRON Grid”效果，但我在把它放到我想要的地方时遇到了一些问题。

像这样的东西。

我的要求：

• 将 1 面淡化为透明
• 把它打包成一个很好.class用的东西<element>，它只是工作

我已经用 2 种不同的技术进行了 2 次尝试。

80's Grid #1 (pseudo selectors)
https://codepen.io/oneezy/pen/MPQWBE
虽然这很有效，但<div>每次我想要效果时都将 10放在我的 html 中并不理想。

body { background: black; }

.grid-container { 
	position: absolute; width: 200%; height: 100vh; bottom: 0; left: -50%; overflow: hidden; 
	transform: perspective(200px) rotateX(40deg) scale(1) translateZ(0);
	transform-origin: bottom;
	padding: 1px; 
	-webkit-background-clip: content-box; 
	-webkit-backface-visibility: hidden;
	outline: 1px solid transparent; 
	will-change: transform; 
}

.grid-line { height: 100%; width: 100%; …

我正在尝试设置一个从底部向上滑动的模式，但没有针对 Bootstrap 4 的实际教程。这是一个尝试：

JSFiddle 演示

超文本标记语言

<button type="submit" class="btn btn-block btn-default footer__btn" data-toggle="modal" data-target="#myModal2"> Open Modal</button>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Body of the modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS

.modal.fade .modal-dialog {
    -webkit-transform: translate(0,100%);
    -ms-transform: translate(0,100%);
    -o-transform: translate(0,100%);
    transform: translate(0,100%);
}

我正在创建一个网页，在调试时我收到以下警告。

    Unexpected value NaN parsing y1 attribute. markup.js:356:19
    Unexpected value NaN parsing y2 attribute. markup.js:356:19
    Unexpected value NaN parsing x1 attribute. markup.js:356:19
    Unexpected value NaN parsing x2 attribute. markup.js:356:19

奇怪的是，我的 html 文件没有 markup.js 文件。不知道是什么。我将其缩小到导致这些问题的元素：

    Unexpected value NaN parsing y1 attribute. markup.js:356:19
    Unexpected value NaN parsing y2 attribute. markup.js:356:19
    Unexpected value NaN parsing x1 attribute. markup.js:356:19
    Unexpected value NaN parsing x2 attribute. markup.js:356:19

不仅如此，每次我将鼠标悬停在检查器中的元素上时，都会出现更多警告。

我使用的是 Firefox 70.0.1（64 位）。这个问题在谷歌浏览器中似乎不会发生。

预期的行为当然是不应该有任何警告。

这些消息非常烦人，我不想关闭警告。有人能告诉我这里发生了什么吗？

我有三个或更多div,我想旋转并垂直对齐它们.我试过但我找不到解决方案.

CSS:

.rotation {
  float: left;
  clear: both;
  width:100px;
}
.rotation .container {
  float: left;
  clear: both;
}
.rotation .rotate {
  float: left;
  margin-top: 20px;
  -ms-transform: rotate(90deg);
  /*IE 9*/
  -webkit-transform: rotate(90deg);
  /*Chrome, Safari, Opera*/
  transform: rotate(90deg);
  transform-origin: 50% 50% 0;
  background: #3c8d37;
  color: #fff;
  font-family:arial;
}

HTML:

<div class="rotation">
  <div class="container">
    <div class="rotate">First Text</div>
  </div>
  <div class="container">
    <div class="rotate">Long Text Long Text</div>
  </div>
  <div class="container">
    <div class="rotate">Very Long Text Very Long Text</div>
  </div>
</div>

我正在尝试做这样的事情:

文本长度可能因文化而异,我希望保持所有div对齐.那可能吗？我感谢任何帮助.

我想使用css伪元素(作为切换指示符)重新创建此图标:

我创建了nececcary伪元素,::after, ::before并尝试使用它们旋转它们transform: rotate(90deg).

我如何告诉他们围绕自己的中心轮换？我试过transform-origin: 50% 50%;哪个不起作用.现在,两个伪元素都相同,right: 10px;但它们并没有放在彼此之上,而是彼此相邻.

您可以检查此JS FIDDLE来说明问题.

我尝试了很多变化.使用html img,使用背景图像作为元素.我的想法是旋转纵向图像90以在侧面安装的显示器上显示(图片侧面放置16:9显示器).我希望图像全屏.这是我最近的尝试.我正在使用视口缩放,但我尝试了百分比和'覆盖'以及许多组合.我知道这是不对的,到目前为止还没有任何事情发生.我切换vh和vw设置的原因是因为运行理论是它仍然在它认为是肖像的图像上应用缩放和变换,即使它已被旋转到横向.令人困惑,有点令人沮丧.谢谢.

.rotate {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bg {
  background-image: url("http://www.liftedsites.net/images/IMG_7863.jpg");
  height: 100vw;
  width: 100vh;
}

<div class="rotate bg"> </div>

我正在使用CSS稍微旋转文本。文本在白色背景上是黑色的，但是由于背景的旋转，所以有一些透明的小线穿过它。此图像将更清楚地显示它：

body {
  background: red;
}

.featured-grid-b .item-heading {
  /*Black text on white background*/
  box-shadow: 0 0 0 5px #fff;
  padding: 0;
  background: #fff;
  line-height: 2 !important;
  display: inline;
  color: #000;
  text-shadow: none;
}

.caption h3 {
  /*Rotate Text*/
  transform: rotate(-3deg);
  margin-bottom: 15px;
}

<div class="featured-grid featured-grid-b" data-animation="fade" data-animation-speed="600" data-slide-delay="5000">
  <div class="caption caption-large">
    <h3><a href="http://www.fair-fashion-magazin.de/2019/07/03/das-nachhaltige-mode-label-people-tree/" class="item-heading">Fashion zum Verlieben: Das Fair Fashion Label People Tree</a></h3>
  </div>
</div>

由于这是一个Wordpress网站，因此我无法真正调整HTML并尝试仅通过CSS更改来实现结果。因此，如果可能的话，我正在寻找可以解决该问题的CSS解决方案。文本应该看起来像这样，在每行文本之间留有空格。