标签: css-transforms

我将以下CSS转换应用于HTML输入框.

-webkit-transform: scale(.5);

当我在输入框中键入文本直到它填满可见区域时,插入符号继续经过输入的边缘并被隐藏.通常,插入符号和文本会在您键入时滚动.

一旦插入符号超出了预缩放输入的宽度,文本最终会开始滚动.在计算何时滚动文本时,浏览器似乎忽略了缩放.

这只是WebKit浏览器的问题(使用Chrome和iPad测试).-moz-transform等效在FireFox中运行良好.zoom属性在webkit中运行良好,但在iPad上缩放时它不够平滑,所以我不能真正将它用于我的项目.

你可以在这里看到一个例子:http://jsfiddle.net/4Kv6w/

第一个输入框带有-webkit-transform缩放.第二个框是缩放设置.第三是正常的.

任何帮助将不胜感激.

编辑 - 通过使用-webkit-transform将输入框移动到左侧,您也可以在不缩放的情况下解决问题.这是一个例子:http://jsfiddle.net/4Kv6w/15/

我正在构建一个简单的纯css'卡片翻转'动画,它必须在IE10中工作,但遗憾的是我写的不是.

这里有jsFiddle演示或这里有html zip样本

我可以看到他们的演示在IE10中可以看到背面可见性,所以也许我只是忽略了一些愚蠢的东西,也许是一副新鲜的眼睛可能有帮助!

提前致谢!

我有一个选择器,可以在悬停时更改颜色,并可以向上扩展1.2.

它可以工作,但只要它扩展到1.2,它就会快速回到1.0,即使仍然在盘旋:

.reveal a:not(.image) {
  color: #13daec;
  text-decoration: none;
  -webkit-transition: color .15s ease, transform 0.3s ease-out;
  transition: color .15s ease, transform 0.3s ease-out;

}

.reveal a:not(.image):hover {
  color: #71e9f4;
  text-shadow: none;
  border: none;
  -webkit-transform: scale(1.2, 1.2);
}

注意:在这种情况下,我只关心Chrome和Safari支持.

我想了解他的网站的纯CSS视差效应基思·克拉克证明在这篇文章中.

就拿这两个jsFiddles:CSS视差的股利,并与身体CSS视差.

第一个按照描述工作,第二个没有 - 并且没有发生视差效应.这两个文档之间的唯一区别是第一个文档缺少div.parallax具有以下属性的intermmediatary 标记:

.parallax {
      perspective: 1px;
      height: 800px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color:rgba(0,0,0,0.25);
 }

第二个删除此标记并将上述样式添加到正文:

body {
      perspective: 1px;
      height: 800px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color:rgba(0,0,0,0.25);
 }

谁能告诉我为什么会这样？为什么我的文档中需要一个看似冗余的标记才能发生这种效果？为什么body元素不能充当div.parallax容器元素？

如何在div的底部倾斜而不影响高度和宽度的响应时间。请看图片。我尝试了CSS转换属性，但无法解决此问题。我想为其应用背景重复图案和框阴影。

.mydiv
{
    height:400px;
    /*width:100%;*/
    width:350px;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    -webkit-transform: rotate(-3.8deg);
    background:url(http://www.emoticonswallpapers.com/background/thumb/nice/nice-background-pattern-184.gif);
}

http://jsfiddle.net/harikriz92/266f31o8

我认为当我们使用百分比值进行CSS3变换转换时,这个百分比是相对于它自己的宽度或高度的,所以(50%,75%)意味着它自己宽度的50%,它的75%自己的高度,但我找不到任何说明的规格.

示例:https://jsfiddle.net/cstsyw3s/1/
使用:

transform: translate(100%, 100%)

我查看了http://www.w3.org/TR/css3-transforms但在那里找不到它 - 我只能找到例如transform-origin"百分比:参考边界框的大小",以及我认为边界框可能是带有元素宽度和高度的矩形.(不包括任何边框)...但除了SVG和表格之外,我找不到边界框的定义.

我创建了这个动画,但它并不流畅.当您将鼠标悬停在蓝色圆圈上时,会打开一个彩色圆圈,但开口不稳定,不是100%平滑.动画可以平滑,怎么样？

#container {
  border: 1px solid black;
  width: 600px;
  height: 600px;
  position: relative;
}
#circle {
  margin: 0;
  padding: 0;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  transition: width 0.2s, height 0.2s;
}
#circle a {
  margin: 0;
  display: block;
  padding: 0;
  width: 250px;
  height: 220px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
}
#circle a:hover {
  opacity: 0.5;
  cursor: pointer;
}
#trap1 { …

我一直试图在div的底部添加Skew/Slant.我已经取得了一些成功,正如你在我的JSFiddle中可以看到的那样,我已经设法应用了偏差,但这并不完全是我想要的.

https://jsfiddle.net/hcow6kjr/

目前,歪斜应用于图像所在的div的顶部和底部,此歪斜似乎也应用于图像本身(如果您关闭歪斜,您将看到图像稍微旋转回正常).我想知道是否可以进行以下调整,以及我如何进行调整......

1 - 仅将歪斜应用于图像所在div 的底部,而不是当前两者.

2 - 不对图像应用歪斜,使图像平放(如果有意义).

HTML

<div>
<h1>
<img src="http://www.visiontechautomotive.co.uk/visiontech/wordpress/wp-content/uploads/2016/08/visiontech-hero-test-1.jpg">
</h1>
</div>

CSS

div {
  background-image: green;
  height: 700px;
  padding: 20px;
  margin-top: 100px;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
  overflow:hidden;
}

提前致谢.

例如,一个带有A,B,C和D点的正方形:

a---b
-   -
-   -
c---d

我想从左向右旋转它,因此A点和C点将更接近B和D,而B和D将保持原位.

这很像在书中翻页,所以页面翻到另一边但是B和D点没有移动.

我最接近的是https://jsfiddle.net/pa9ykhwa/,基本上就是这样

div{   
    transform-style: preserve-3d;
    transition-duration: 1s; 
}

div:hover {
    transform-origin: 100%;
    transform: rotateY(180deg) translateZ(0); 
}

问题是你可以清楚地看到B点和D点在移动.

我有一系列元素,如下图所示:

它们向一侧旋转45度(内部-45度内,保持直立).

现在我想围绕垂直轴旋转每个元素,穿过元素的中心.旋转Y不起作用,因为它是45度角.

你会怎么做呢？