标签: css-transforms

我有一个页面,其中有一个<div>元素轮,单击一个按钮时整个轮子旋转.

我通过使用CSS转换实现了这种效果,这些转换本质上是绝对的.然而,车轮非常大,在我的高清显示器上看起来不错,但是较小的屏幕会使边缘切断.我不能像普通布局那样使用%宽度,我需要的是缩放整个页面,就像大多数浏览器缩放功能一样.

对于我自己,我知道ctr + mouseWheel会缩小页面,所以我可以看到整个页面,但我不能指望其他人这样做.

我知道我可以-browser-transform: scale(amt);在包装div上使用以获得我想要的效果,但是我无法找到一种动态的方法.如果我将比例设置为.5,它将是.5,无论屏幕如何.我希望在任何屏幕上,滚轮的边缘距离屏幕边缘几个像素.我知道可以使用媒体查询来帮助解决问题,但是他们会给我留下不太理想的结果,或者需要太多不同的查询.必须有一种方法可以通过-browser-transform: scale(amt);编程方式进行修改,或者采用其他方式进行有限控制.

有什么想法吗？

我需要在一侧创建带三角形的按钮(如http://css-tricks.com/triangle-breadcrumbs/),带有线性垂直渐变和边框,我想使用纯CSS3.如果我需要45度的"三角形",那就没关系,我只是写这样的smth

.button:after {
    -webkit-transform: rotate(45deg);
    background: -webkit-linear-gradient(-45deg, #fff, #000);
    content: '';
    width: 2em;
    height: 2em;
    display: block;
}

并在.button下隐藏一半伪元素(因此只有另一半可见,如三角形).

但是,如果我需要另一个角度(例如更陡峭) - 我无法使用标准XY旋转和缩放.我可以使用例如2个div,一个用于三角形的上半部分,一个用于底部,但是边框和渐变可能存在问题.

也许有可能通过多个颜色停止渐变来做到这一点？

我在使用任何使用默认webkit引擎的浏览器(例如默认浏览器,Dolphin HD,亚马逊Kindle Fire Silk浏览器等)中使用CSS3 2D Transforms在Android 2.3中工作时遇到了麻烦.Android 2.3 webkit引擎确实支持2D变换,我已经能够让一些2D变换的网站正确渲染,而不是我的网站!

有没有人知道Android 2.3中可能导致与2D变换冲突的任何问题？或者,有没有一种很好的方法来使用Android 2.3 webkit渲染引擎来定位浏览器的css？当我使用Modernizr时,在这种情况下它不起作用,因为Android 2.3浏览器测试2D变换是正面的.

这是我的网站:http://StevenGerner.com.在首页上,我正在旋转两个元素-90deg(网站标题和一个h2元素),并且都不会在Android 2.3浏览器上旋转.我甚至尝试过其他的css变换,但似乎没有任何改变.如果我将整个页面剥离到基本,那么转换工作完美无缺,所以我的网站上可能还有其他冲突,我只是无法弄清楚是什么!这是特定于变换的CSS:

//Applied to the h2 element which says 'howdy' at the top of the page
    #about-front h2 {
        display: inline-block;
        float: left;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 170% 170%;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 170% 170%;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 170% 170%;
        -o-transform: rotate(-90deg);
        -o-transform-origin: 170% 170%;
        transform: rotate(-90deg);
        transform-origin: 170% 170%;
        width: 1em;
        text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 …

我只使用一个SVG背景图像创建了一个左右导航按钮,并水平翻转以获得另一个方向.这适用于除Internet Explorer 9之外的所有支持CSS 2D转换的浏览器.基本上CSS看起来像这样:

div.nav-left, div.nav-right {
    background-image: url('TriangleArrow-Right.svg');
}

div.nav-left {
        -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
                transform: scaleX(-1);
}

我在Internet Explorer 10,Firefox,Chrome,Safari等中创建了一个正确的jsFiddle:

但实际上在IE9中看起来像这样:

我已经包含了一个大于号的符号来说明按钮应指向哪个方向.实际上你可以看到,IE9正确地将变换应用于文本,但是对于SVG背景图像则完全相反.

如果我将SVG背景图像更改为PNG,则一切都可以在IE9中正常工作,但请参阅此jsFiddle.

我无法找到任何相关信息.这似乎是一个错误,因为IE9应该正确支持CSS转换和SVG作为CSS背景.

我有三个元素,每个元素都有自己的变换,我想为它们的转换变换设置动画而不影响比例:

.one{
    -webkit-transform: scale(0.5);
}
.two{
    -webkit-transform: scale(0.8);
}
.three{
    -webkit-transform: scale(0.2);
}

@-webkit-keyframes bounce{
    from{
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: translate3d(100px, 100px, 0);
    }
}

<div class="one">test1</div>
<div class="two">test2</div>
<div class="three">test3</div>

但这种转变超越了规模.我可以为每个元素使用不同的关键帧.或者使用缩放变换包装每个元素并为其父级设置样式,并使用仅一个关键帧为其设置动画.但这一切都有点棘手.有更好的解决方案吗？

http://jsfiddle.net/422t2/

所以我有以下CSS:

div {
  transform: translate(10, 10);
}

div.active {
  transform: scale(1.1);
}

问题是a div.active不是translate而且只是scales.

是不是只有CSS(用JS我知道我可以)编写类似的东西:

div.active {
  transform: inherit scale(1.1);
}

？

这是某种CSS3设计问题吗？

这是一个Jsfiddle 演示

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="MyPath" d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
    </defs>
    <use xlink:href="#MyPath" fill="none" stroke="red" />
    <text class="material-icons">
        <textPath xlink:href="#MyPath">&#xe55d; &#xe55d; &#xe55d; &#xe55d;</textPath>
    </text>
    <!-- Show outline of the viewport using 'rect' element -->
    <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" />
</svg>

 是一个特殊字符,显示为"箭头".

有在上述演示了一个问题:箭头的方向在<textPath> …

我创建了一个锚点链接按钮,当我点击状态按钮时,我想显示Spinner动画:focus.我正在使用Font Awesome来显示动画但是当我点击按钮时,微调器动画无效.

注意:我不想在这里使用JavaScript只想用Pure CSS

这是CodePen链接https://codepen.io/rhulkashyap/pen/vLPNdQ

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
 body {
  font-family: 'Titillium Web', sans-serif;
  text-align: center;
}
#button {
  padding: 15px;
  background-color: green;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  width: 300px;
  display: inline-block;
  text-align: center;
  font-size: 25px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#button:before {
  content: "\f090";
  font-family: FontAwesome;
  margin-right: 5px;
}
#button:focus {
  background-color: #02b402;
}
#button:focus:before {
  content: "\f1ce";
  -webkit-animation: spin .8s ease infinite;
  animation: spin .8s ease …

我有一个元素已经转换为a matrix3d给它透视.它代表手持设备的屏幕.

有一个背景图像显示了手持设备本身,并没有转换.定位保持它的元件,并且屏幕元件绝对位于其中,在left: 0; top: 0;容器的左上方,然后变换,其中原点位于容器的左上方.这是我与背景图像完美排列的最简单方法(我使用这个非常方便的工具来提出矩阵),它将屏幕元素从角落移开.

我希望能够通过鼠标和触摸事件与屏幕进行交互.为此,在点击或触摸事件中,我需要找到屏幕元素的局部坐标系中的坐标 - 即变换发生前的坐标.换句话说,当点击手持设备屏幕的左上角(不是页面边界框的左上角!)时,我想要[0, 0],当点击屏幕的右上角时,在这个转换的情况下实际上是在页面上以及右边,我想要的[untransformedWidth, 0].

鼠标事件提供offsetX并offsetY据称正是这样做的(下面更多内容),但触摸事件没有这些属性,所以我需要一种方法来自己计算它们.

使用math.js我可以输入转换矩阵并将其反转.我有一些代码来循环CSS规则来获取transform: matrix3d(...)规则(如果我不需要,我不想在我的代码中重复它),我将跳过 - 我知道它有效,因为数字匹配CSS.

请注意,CSS的列矩阵元素按列顺序排列,因此请matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)使用常规矩阵表示法,如下所示:

?            ?
? a  e  i  m ?
? b  f  j  n ?
? c  g  k  o ?
? d  h  l  p …

我有一个带有以下CSS的标题:

.header{
  display: block;
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 1320px;
  z-index: 10;
  box-sizing:border-box;
}

我在内容的容器中有无限滚动.在iOS 11中,当我滚动标题消失了一秒钟然后又回来了.

我尝试了以下修复:

1. transform: translate3d(0,0,0)

2. transform: translateZ(0)

3. -webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000;

4. 我已经加入viewport-fit="cover",并viewport-fit="contain"在元视口代码了.如此处所示.

5. 标题的子元素也没有position: fixed;在CSS中.
6. 我也通过添加尝试了上述解决方案left: 0;.
7. 另一个解决方案建议我尝试添加-webkit-overflow: hidden;到页面正文.
8. 我也尝试添加overflow-x:hidden;到页面的html标签.

所有上述解决方案都没有奏效.