标签: css-transforms

我试图实现一个文本旋转-90degrees的表.到目前为止,我一直在使用文本的图像,但我希望将其更改为文本.

我似乎无法解决一些问题.

1. 第07列文本溢出到第08列.
   • 我无法通过溢出来解决这个问题:隐藏; 因为我必须将宽度和高度都设置为200px才能获得正确的形状.
2. 我必须设置旋转文本的宽度和高度,这使得它不能使用起来非常灵活,这也会导致问题1.
3. 我必须将余量设置为"0 -100px",因为我必须将宽度设置为200px,但一旦旋转,其宽度仍然是200px,这将使表格难以置信.
4. 如果更改了字体大小,它将不再适合列.
5. 字体看起来很糟糕,很难读懂.我认为这将在未来的浏览器更新中发挥作用.

这是一个实际的jsFiddle

http://jsfiddle.net/CoryMathews/ZWBHS/

我需要它才能工作,并且已经在IE7 +,Chrome,FF和Opera中获得了相同的功能.

有关如何改进此方法使其实际可用的任何想法？我的一些想法是:

1. 我可以在页面加载时使用一些javascript计算宽度,高度等,这将解决上面的问题2和3但不是1.然而我讨厌依赖javascript进行显示.

2. 也许我误用了可以让我更好地控制的变换起源.我目前使用"0 0"的数字让我可以轻松计算出所需的尺寸.

这与CSS3在动画元素上旋转非常相似,导致不调用click事件

虽然我的问题有点不同,加上无法评论它添加支持信息.

查看我的沙箱:http://jsfiddle.net/5bsG3/2/

在鼠标悬停时,我有一个围绕Y轴旋转的链接.点击事件(对于jQuery或仅用于链接导航)并不总是被检测到.尝试单击链接的填充区域(仅在文本旁边但在链接上).这几乎就像是命中检测有问题,因为跨度是旋转的,因此在鼠标没有点击跨度的角度.即使鼠标仍然点击LINK的填充区域.大约70-110度的角度似乎是个问题.

上述帖子中提出的解决方案实际上并未解决此问题.此外,我的问题可能有点不同,因为我的旋转被处理为CSS转换而不是JS间隔触发器.

有什么想法吗？谁看过这个吗？我知道这是一种简洁的链接方式,但对于目标网站来说,这是一个可接受的数量奶酪.

随意简化jsfiddle,我开始简单,并添加了一些调试信息,以帮助确定问题.

HTML:

<ul>
  <li><a href="" class="flip-link"><span>Click this link</span></a></li>
  <li id="LinkCounter">LinkClicked</li>
  <li>&nbsp</li>
  <li id="SpanCounter">SpanClicked</li>
<ul>

CSS:

ul li
{
    display: inline;
    float: left ;
}

.flip-link
{
    float:left ;
}

span
{
    float:left ;
}


.flip-link {
    display: block;
    overflow: hidden;

    height: 20px;
    padding: 5px 50px 7px 50px ;
    margin-right: 10px ;

    background: #AAA;

    -webkit-perspective: 50px;
       -moz-perspective: 50px;
        -ms-perspective: 50px;
            perspective: 50px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: …

我使用CSS3和关键帧在播放按钮(这是一个锚标签)上有一个简单的"脉动"效果.

虽然它在Chrome和Safari中完美运行,但它似乎并不适用于Firefox.有谁知道为什么？

li > a {

    -webkit-animation: pulsate 3s ease-in-out;
    -moz-animation: pulsate 3s ease-in-out;
    -o-animation: pulsate 3s ease-in-out;
    animation: pulsate 3s ease-in-out;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
        opacity: 0.3;
    }

    50% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
        transform: …

为什么简单的旋转会使图像模糊？

希望旋转图像90度,但生成的图像模糊不清.

transform: rotate(90deg);

这在Firefox和Chrome中都是一样的(没有检查过其他浏览器).

这是一个JSFiddle链接:

http://jsfiddle.net/6d2GT/1/

是否有任何变通方法/技巧可以最大限度地减少模糊？

-

如果它是特定于计算机的,则为图像链接http://i.imgur.com/WzXkRL9.png

当以百分比移动对象时,CSS具有标准行为,该百分比表示其父容器(div)的维度.

使用CSS3时不是这样transform: translate3d().如果对X,Y或Z坐标使用百分比值,则百分比表示当前对象的尺寸,而不是其父对象的尺寸.

问题现在应该是显而易见的:如果我需要使用CSS3动画并将transform: translate3d()当前对象移动到其动态可调整大小的父级的维度内,我根本就不知道该怎么做.示例:using translate3d(100%, 0, 0)将按当前对象的物理宽度移动对象,而不是其包含的块.

有任何想法如何动态改变父母的维度,好吗？或者如何使用硬件加速使当前对象在其父级内进行转换translate3d()？

Mozilla Developer Network确认:百分比(转换中)是指边界框的大小.

请问有解决方法吗？

我试图使用css 3变换旋转功能将div旋转到一个点.

我达到了这一点:jsfiddle链接

$(document).ready(function(){
    var scw,sch,scx,scy;
    calcCenter();
    $(window).resize(function() {         
        calcCenter();
    });
    function calcCenter(){
      sch = $(window).height(); 
      scw = $(window).width(); 
      scx = scw/2;
      scy = sch/2;
        $(".circle").remove();
      var circle = $("<span></span>").addClass('circle').text('.');
      circle.css('top',scy-50+"px");
      circle.css('left',scx-50+"px");
    $(document.body).append(circle);
    }
    function calcAngle(p1,p2){

        var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
        return angle;
    }



    $(document).click(function(e){  
        var box = $("<span></span>").addClass('box');
        var x = e.pageX,y=e.pageY; 
        box.css('top',y+"px");
        box.css('left',x+"px"); 

        $(document.body).append(box);
        var angle = calcAngle({x:x,y:y},{x:scx,y:scy});

        box.css('-webkit-transform','rotate('+(90+angle)*-1+'deg)');        

        box.draggable({
                drag: function(e) {
                        var box = $(this);
                        var x …

我必须使用变换矩阵来动画变换:元素的比例.

我想从0扩展到1.如果我使用以下代码它可以正常工作:

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: scale(0);
    transition: transform 1s;
}
.container.open {
    transform: scale(1);
}

https://jsfiddle.net/w4kuth78/1/

如果我用的是矩阵本身,它是不工作的.

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: matrix(0, 0, 0, 0, 0, 0);
    transition: transform 1s;
}
.container.open {
    transform: matrix(1, 0, 0, 1, 0, 0);
}

https://jsfiddle.net/m7qpetkh/1/

我做错了什么或者这不起作用？我想知道,因为它在Chrome和Firefox中不起作用......

console_log调试输出表示在从0到1的缩放时,矩阵也从矩阵(0,0,0,0,0,0)到矩阵(1,0,0,1,0,0)设置.

编辑:

完全混淆......如果我将矩阵中的scaleX和scaleY值更改为0.1或0.01,它就可以工作......哇

我试图用纯粹的css创建一个3D球体,但我无法生成所需的形状.我见过一个圆柱体,但我找不到任何创建实际球体的参考.

我目前的代码如下:

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: …

我filter: blur()在Chrome上遇到了问题.我曾经transform: translate3d(0, 0, 0)鼓励硬件加速,它大大提高了性能(我谨慎使用它).我有一个元素,我已将其设置before为具有背景图像和模糊.我已将其范围设置为超出其包含元素的范围.

以上是Chrome中发生的事情的屏幕截图.硬件加速版本在左侧,而非硬件加速版本在右侧.请注意,在左侧,模糊显示为带有柔化边缘.

看起来在Chrome中,当硬件加速时,元素会在模糊之前被溢出剪切,从而导致羽状边缘.

除了禁用硬件加速,这可以通过这种大半径模糊来消除性能,还有一种方法可以鼓励Chrome在裁剪之前执行模糊操作吗？

我在下面附上了一个示例测试用例.

谢谢!

      div {
        width: 200px;
        height: 200px;
        position: absolute;
        box-sizing: border-box;

        overflow: hidden;
        border: 2px solid red;
      }

      div::before {
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
        content: "";
        display: block;
        position: absolute;
        left: -200px;
        top: -200px;
        width: calc(100% + 400px);
        height: calc(100% + 400px);
        background-size: calc(100% + 400px) calc(100% + 400px);

        filter: blur(60px);
        -webkit-filter: blur(60px);
        z-index: 1;
      }

      #incorrect::before {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: …

我正在研究React Native中的一些动画,我注意到在Android上,transform: [{ translateY: height }]并没有像在iOS上那样占据整个屏幕.在Android上它只需要它自己的高度.如何让Android动画看起来像iOS？

安卓:

iOS版: