标签: css-transforms

我试图想出一种通过 CSS 围绕 Y 轴透视图像旋转图像的方法，以便最终的可见宽度等于所需的像素数。

例如，我可能想要旋转300px图像，以便在应用旋转和透视后，图像的宽度现在为240px（原始宽度的 80%）。通过反复试验，我知道我可以设置transform: perspective(300) rotateY(-12.68)并将左上角的点放在-240px（这是使用图像的右侧作为原点）

我不太清楚如何对其进行逆向工程，以便对于任何给定的图像宽度、透视和所需宽度，我可以计算必要的旋转。

例如。对于同一张300px图像，我现在希望它的旋转后宽度为150px- 获得必要角度所需的计算是什么？

这是一个游乐场，可以让您了解我正在寻找的内容，我复制了透视和旋转变换完成的数学来计算最左边点的最终位置，但我无法弄清楚给出如何在给定矩阵数学和涉及的多个步骤的情况下求解角度。

https://repl.it/@BenSlinger/PerspectiveWidthDemo

const calculateLeftTopPointAfterTransforms = (perspective, rotation, width) => {

  // convert degrees to radians
  const rRad = rotation * (Math.PI / 180);

  // place the camera
  const cameraMatrix = math.matrix([0, 0, -perspective]);

  // get the upper left point of the image based on middle right transform origin
  const leftMostPoint = math.matrix([-width, -width / 2, 0]); …

我正在使用border-image属性来创建带有 9 切片的样式组件。此外，我还使用 csstransform: scale(x)属性根据屏幕尺寸缩小/放大我的元素。我遇到的问题是，当比例设置为整数（如 1、2、3...）时，我的 9 切片组件看起来不错，但如果它是浮点数，则边框显示 9 切片线/间隙，而我是很难修复它。

我尝试过为border-image-slice以及设定不同的值scale。最初认为当小数点后的数字是奇数时会导致此问题，但无论如何这是一个奇怪的想法。

<div class="Primary-Back-Button" style="transform: scale(1.2);">
  <button class="Primary-Button" id="">
     <div class="Primary-Button-Content">Button</div>
  </button>
</div>

预期的结果是在使用比例时在边界上不显示任何线条/间隙，否则我也愿意改变我们缩放事物的方式。我基本上想在桌面应用程序上保持相同的布局，无论屏幕尺寸是什么。这是我正在开发的一款桌面游戏，它在 UI 端使用 JS。

当比例为整数时的预期结果，在本例中设置为 6：

注意当我将比例设置为 6.25 时的线条

我正在尝试使用CSS动画在我的一个小项目上运行"倾斜"动画.不幸的是我无法从MS演示中移植它 - 无疑所有代码都在那里:http://m.microsoft.com/windowsphone/en-us/demo/default.aspx#home

我正在尝试让页面在加载页面时淡入淡出,只是那部分.一次绝对没问题.我知道我需要定义供应商关键帧,但我的尝试非常糟糕,以至于我没有在jsFiddle的示例中粘贴它们:

http://jsfiddle.net/qCQQD/2/

谁在那里谁会帮助我？这将超出真棒!

编辑1:

a)我仍在尝试在加载页面时运行rotateRight动画.我可能在.tile类中使用了带有leftRotate的hacky版本,并在页面加载中删除了(并添加了rightRotate).

b)这个

.tile:active {
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -o-transform: scale(0.97);
    -ms-transform: scale(0.97);
    transform: scale(0.97);
}

由于添加了代码,Chrome中的速度非常慢,我怎样才能恢复正常？

我怀疑#tile需要某种时间框架

-webkit-transition: 300ms 160ms;

它现在看起来像一个慢动作.我将尝试添加类似-webkit-transition的东西:50ms.(是的,我知道,总菜鸟).

预处理器LESS中css"transform"属性的正确语法是什么？例如,以下内容会引发错误:

.transform(scale(1.1)) {
    -webkit-transform: @transform;
    -moz-transform: @transform;
    -ms-transform: @trasnform;
    -o-transform: @transform;
    transform: @transform; 

}

错误:变量"transform"未定义.如果转换不能用于缩减css,那么还有其他选择吗？

http://less2css.org/

如何仅使用较少的css和hovers来指定动态缩放？

当我尝试transform: rotate(45deg)使用jQuery UI draggable拖动绝对定位和旋转div(使用css3 )时,似乎jQuery不知道旋转div的新原点在哪里.因此,当您开始拖动时,div会立即移动几个像素.

这是一个jsFiddle所以你可以自己看看:http://jsfiddle.net/k7g7R/4/ (点击它旋转div然后拖动它).

请注意,当可拖动div处于相对位置时,它可以正常工作.

有谁知道发生了什么,以及我如何解决这个问题？

我有一个主要的div(小提琴中的红色div),侧面有一个较小的垂直标签(小提琴中的蓝色div).

RED div是标准但蓝色div旋转90度(因为我需要在其中有垂直文本).这是问题开始的地方.

红色div垂直定位在50%,因此位于页面中间并通过滚动等锁定.

我想对齐蓝色div,使蓝色div的上边缘与红色div的上边缘位于同一Y位置.

我宁愿不使用jQuery,但如果需要可以做.

期望的输出:

小提琴在这里:http://jsfiddle.net/kBKf6/

这是我正在使用的代码:

<div id="main" style="position: fixed; top: 50%;  margin-top: -250px; left:0;   height: 500px; width: 450px; background-color:red;">
Main Content Div
</div>
<div id="vertical_div" style="overflow:hidden; position: fixed; left:350px; height:40px; width:200px; margin: auto; background-color:blue; text-align:center; color:white; -webkit-transform: rotate(90deg) translate(-50%, -50%); -moz-transform: rotate(90deg) translate(-50%, -50%); -ms-transform: rotate(90deg) translate(-50%, -50%); -o-transform: rotate(90deg) translate(-50%, -50%); transform: rotate(90deg) translate(-50%, -50%);">
Side Tab
</div>

我有下面的Sass片段就像一个魅力,但我想知道我是否需要为我的变换属性添加前缀,如果是,如何？(如果没有,为什么不呢？)

@mixin expand-o-band() {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

@-webkit-keyframes expand-o-band { @include expand-o-band(); }
@-moz-keyframes expand-o-band { @include expand-o-band(); }
@-o-keyframes expand-o-band { @include expand-o-band(); }
@keyframes expand-o-band { @include expand-o-band(); }


.circle-thing {
    -webkit-animation: expand-o-band 1.5s infinite; /* Safari 4+ */
    -moz-animation:    expand-o-band 1.5s infinite; /* Fx 5+ */
    -o-animation:      expand-o-band 1.5s infinite; /* Opera 12+ */
    animation:         expand-o-band 1.5s infinite; /* IE 10+, Fx 29+ */
} …

我有一个使用transform：rotation的页面，但是在元素未旋转的情况下留了一个大空白。我发现其他几个人也提出了类似的问题，但是我无法调整这些答案来解决我目前的问题。我认为它们可能包含正确的解决方案，并且在尝试将其应用于我的案例时犯了一个错误：

CSS旋转div在顶部创建空白

CSS3刻度周围的空白

这是一个jsfiddle来向您展示问题：

https://jsfiddle.net/jonotrain/L2h12qm5/

如您所见，旋转的文本下方有很多空白。我希望文本以相同的地方结尾，没有空白。

这是HTML：

<BODY>
<DIV class = "titles" id = "sideways" style = "position: relative;">";
<p class = "volumes" id="volumes"></p>";
<ul class = "titles">
    <li>ale.imzqzfojdobcggydk</li>
<li>mouwl sxjjwrk,osbl</li>
<li>cqjpjfeqhgovtto</li> 
....
  </ul>
</DIV>
</BODY>

和CSS：

 div.titles {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    display: inline-block;
    right: 0;
    left: 367px;
    height: 260px;
    top: -4px;
}

p.volumes {
padding: 0;
font-family: "Arial Narrow";
line-height: 220%;
font-size: 10;
}
ul.titles {

list-style-type: none;
text-align: center;
}
ul.titles li { …

如何在悬停时没有实际的div缩放的情况下在此div缩放内制作图像？因此，我只希望图像放大。

这是代码：

<div id="container">
    <img id="image" src="some-image">
</div>

我知道box-shadowCSS中的属性,但这会产生一个阴影,看起来像是投射在元素后面的墙上.我需要创建一个看起来像元素站在地面上的阴影,如下所示:

这是我到目前为止:

div {
  display: inline-block;
  height: 150px;
  width: 150px;
  background: url(//placehold.it/150x150);
  margin-left: 20px;
  box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75);
}

<div></div>
<div></div>