标签: transform

我可以将转换用作转换属性的值吗？

transition-property: transform;

W3C 转换标准没有将转换列为 Animatable 值。

事实上，W3C 转换标准在 7 的表中缺少 Animatable:Yes/No 的行。'transform' 属性。

我担心这是否合法。

这个stackoverflow answer建议使用transform作为transition-property的值。

我可以使用 0% 和 100% 关键帧获得变换动画，但如果只涉及 2 个状态，我更喜欢过渡而不是动画。

我已经建立了一个演示，它有 5 个浮动的<div>s 和不同长度的旋转文本。我想知道是否有一种方法可以让 CSS 类处理所有文本的居中，而不管长度如何。目前，我必须为样式表中的每个字符长度创建一个类。这可能会变得太混乱。我还注意到，如果我增加或减少包装的尺寸，偏移量就会被搞砸<div>。

我将通过 jQuery 将这些类添加到 div，但我仍然必须设置每个类以实现跨浏览器兼容性。

.transform3 {
    -webkit-transform-origin: 65% 100%;
    -moz-transform-origin: 65% 100%;
    -ms-transform-origin: 65% 100%;
    -o-transform-origin: 65% 100%;
    transform-origin: 65% 100%;    
}
.transform4 {
    -webkit-transform-origin: 70% 110%;
    -moz-transform-origin: 70% 110%;
    -ms-transform-origin: 70% 110%;
    -o-transform-origin: 70% 110%;
    transform-origin: 70% 110%;
}
.transform5 {
    -webkit-transform-origin: 80% 120%;
    -moz-transform-origin: 80% 120%;
    -ms-transform-origin: 80% 120%;
    -o-transform-origin: 80% 120%;
    transform-origin: 80% 120%;
}
.transform6 {
    -webkit-transform-origin: 85% 136%;
    -moz-transform-origin: 85% 136%;
    -ms-transform-origin: 85% …

我有一个用于移动断点的菜单汉堡包“图标”。我将它设置为 3 行，我希望它们转换为 X（这将关闭菜单）。

我希望顶部栏旋转 45 度，中间栏消失，底部栏以其他方式旋转 45 度。然后顶部和底部栏将向上移动并创建一个 X

截至目前......它只在我按住鼠标时才动画。为什么会这样？我只需要动画在点击时自行完成。

html：

<a class="navbar-item-link" "javascript:void(0)" >
    <div class="hamburger-icon"><span></span></div>
</a>

手写笔：

.hamburger-icon
    &:before, &.hamburger-icon span, &:after
    content ''
    display block
    height 2px
    width 20px
    background-size 100%
    background rgba(255,255,255,0.5)
    margin 6px auto 7px auto
    transition all 0.2s linear

    &:active
        &.hamburger-icon span
            background-color transparent
        &:before
            transform rotate(45deg)
            top -10px
            height 2px
            background rgba(255,255,255,0.5)
            width 30px
        &:after
            transform rotate(-45deg)
            bottom -10px
            height 2px
            background rgba(255,255,255,0.5)
            width 30px

我正在使用熊猫模块。在我的 DataFrame 3 字段中是帐户、月份和工资。

    account month              Salary
    1       201501             10000
    2       201506             20000
    2       201506             20000
    3       201508             30000
    3       201508             30000
    3       201506             10000
    3       201506             10000
    3       201506             10000
    3       201506             10000

我在 Account 和 Month 上进行 groupby 并将工资转换为它所属组的工资百分比。

MyDataFrame['salary'] = MyDataFrame.groupby(['account'], ['month'])['salary'].transform(lambda x: x/x.sum())

现在 MyDataFrame 变成如下表

    account month              Salary
    1       201501             1
    2       201506             .5
    2       201506             .5
    3       201508             .5
    3       201508             .5
    3       201506             .25
    3       201506             .25
    3       201506             .25
    3       201506             .25 …

在表面着色器中，给定世界的上轴（以及其他轴）、世界空间位置和世界空间中的法线，我们如何将世界空间位置旋转到法线空间中？

也就是说，给定一个向上向量和一个非正交的目标向上向量，我们如何通过旋转它的向上向量来变换位置？

我需要这个，所以我可以只受对象的旋转矩阵，这是我的顶点位置没有访问。

这是我想要做的图形可视化：

• 向上是世界向上矢量
• 目标是世界空间法线
• Pos 是任意的

该图是二维的，但我需要为 3D 空间解决这个问题。

我确实设置了一个 HTML 页面，我使用 z-index 来设置元素的“视觉”顺序。它按预期工作；但是当我使用transform: scale()时会中断。

#blocks-both{
    transform: scale(0.9);
}

我在这里做了一个简化的例子：http : //codepen.io/anon/pen/LNYrar

我阅读了很多关于这个特定问题的消息，但我找不到使我的设计工作的解决方案。我想我不明白这方面的事情。

有人可以帮忙吗？

谢谢 ！

我有一个包含编码旋转和位置数据的 4x4 变换矩阵的数组（我已经确认该矩阵表示 Octave 中的有效变换）。我想使用这个数组的内容设置一个 Three.js 对象（一个Object3D）的 matrixWorld 属性，即根据转换矩阵设置对象的位置和旋转。

根据three.js文档中的这个页面和这里提出的各种问题（例如，this one和this one），似乎关键是设置nameOfObject.matrixAutoUpdate为false。但是，考虑到这一点，我尝试了多种设置方法nameOfObject.matrixWorld，但没有一种方法会更改渲染对象的位置：它保持在原点，没有旋转，就像matrixWorld4x4 单位矩阵的情况一样。

这是我尝试过的（此代码在render()调用之前位于更新方法中）：

// Setting up a three.js matrix
var tempMatrix = new THREE.Matrix4();
tempMatrix.fromArray(arrayContainingTransformationMatrix);

// Values are set as expected
console.log(tempMatrix.elements);

// Note that the approaches below were tried one at a time

// First approach (doesn't work)
nameOfObject.matrixAutoUpdate = false;
nameOfObject.matrixWorld.copy(tempMatrix);

// Second approach (also doesn't work)
// Based on the …

我在 , 上使用transform scaleY动画div来廉价地为其高度设置动画，但是当box-shadow应用到它时效果不佳。

div {
    width: 300px;
    height: 100px;
    transform: scaleY(1);
    transition: all 2000ms;
    transform-origin: 0 0;
    background-color: yellow;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
                0 1px 10px 0 rgba(0, 0, 0, 0.12),
                0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
div:hover {
    transform: scaleY(5);
}

<div></div>

jsbin.com demo

你可以看到 box-shadow 也被缩放了。不仅如此，它还会在动画结束时捕捉，看起来很难看。

关于如何transform在不缩放阴影的情况下保持快速 60fps动画的任何建议？动画高度会获得所需的效果，但在移动设备上滞后很多。

已经试过了

将阴影应用到div::after伪元素并转换div它不起作用，因为阴影也会被缩放。

在我的 Unity 项目中，我通过脚本动态创建对象。

var btnExit = new GameObject("Player " + ID + "'s Exit Button");
btnExit.transform.SetParent(UI.transform);

我需要设置对象的锚点和枢轴。我应该能够使用它的 RectTransform 组件来做到这一点，就像我在场景编辑器中创建对象时所做的那样。

myRectTransform.anchorMin = new Vector2(1, 0);
myRectTransform.anchorMax = new Vector2(0, 1);
myRectTransform.pivot = new Vector2(0.5f, 0.5f);

但是对象的变换组件不是 RectTransform，只是普通的 Transform。所以我不能将它转换为使用我需要的那些属性。

RectTransform myRectTransform = (RectTransform)btnExit.transform;

那么如何在我通过脚本而不是在场景编辑器中初始化的对象上正确使用 RectTransform 类的功能呢？

这个应用程序目前可以完美地获取和显示图像，但是当我尝试添加其他方法以在 ImageListAdapter 类中滑动时，例如override()orcenterCrop()或transform()or placeholder()，它不起作用。我的意思是它甚至不允许我添加这些，它以红色显示并且没有类似的建议，但是许多教程建议使用这些方法来修改大小，为什么它不起作用。难道我做错了什么？

主活动.java

package com.example.imnobody.photosearch;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

         String[] eatFoodyImages = {
                "http://i.imgur.com/rFLNqWI.jpg",
                "http://i.imgur.com/C9pBVt7.jpg",
                "http://i.imgur.com/rT5vXE1.jpg",
                "http://i.imgur.com/aIy5R2k.jpg",
                "http://i.imgur.com/MoJs9pT.jpg",
                "http://i.imgur.com/S963yEM.jpg",
                "http://i.imgur.com/rLR2cyc.jpg",
                "http://i.imgur.com/SEPdUIx.jpg",
                "http://i.imgur.com/aC9OjaM.jpg",
                "http://i.imgur.com/76Jfv9b.jpg",
                "http://i.imgur.com/fUX7EIB.jpg",
                "http://i.imgur.com/syELajx.jpg",
                "http://i.imgur.com/COzBnru.jpg",
                "http://i.imgur.com/Z3QjilA.jpg",
        };

        GridView gridView = (GridView) findViewById(R.id.gridview);

        ImageListAdapter imageListAdapter = new ImageListAdapter(MainActivity.this,eatFoodyImages);

        gridView.setAdapter(imageListAdapter);

    }
}

图像列表适配器.java

package com.example.imnobody.photosearch;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import …