标签: css-transforms

是否可以在同一元素上应用CC平移X和Y？

如果我尝试这个翻译,翻译会覆盖translateX:

.something { 
        transform: translateX(-50%);
        transform: translateY(-50%);
}

有谁知道如何实现这样的倾斜:

使用CSS的新转换属性？

你可以看到我试图扭转两个角落,任何人都知道这是否可能？

是否可以在CSS3中设置旋转点？默认旋转点为50%,50%.我试过了:

transform: rotate(230deg); 
rotation-point:90% 90%;

但它不起作用......有什么建议吗？

是否可以使用当前的CSS3沿弧或曲线平移对象(特别是DIV)？这是一张有助于说明的图片.

在我的页面中间,我有一个div元素,其中包含一些内容(其他div,图像,等等).

<div>
    before
</div>
<div id="content-to-scale">
    <div>something inside</div>
    <div>another something</div>
</div>
<div>
    after
</div>

我想扩展该元素(内容到规模)和所有它的孩子.看起来像是CSS3变换规模操作的工作.但问题是,这只是对元素层次结构可视化的转换,它不会改变页面上元素的空间(或位置).换句话说,缩放该元素将使其与"之前"和"之后"文本重叠.

是否有简单/可靠的方法来扩展视觉表示,还有占用的空间量？

没有Javascript的纯CSS的额外分数.对于使用其他转换函数(如旋转和倾斜)做正确解决方案的解决方案,还有更多要点.这不必使用CSS3转换,但需要在所有最近支持HTML5的浏览器中支持它.

CSS转换和转换之间的主要区别是什么？

这两者都用于改变对象的当前形状/状态.(你可以用JS等做漂亮的动画..)

但是我仍然不清楚哪一个用于何处以及用于什么.

我有一个带有两个类的元素,一个称为"旋转",将元素旋转360度,另一个称为"双面",将元素缩放为正常大小的2倍:

.rotate {
    transform: rotate(0deg);
}

.rotate:hover {
    transform: rotate(360deg);
}

.doublesize {
    transform: scale(1);
}

.doublesize:hover {
    transform: scale(2);
}

http://jsfiddle.net/Sbw8W/

我猜这不起作用,因为类重写了彼此的transform属性？

我知道我可以轻松地在一个CSS规则中执行此操作,例如:

.doublerotatesize {
    transform: scale(1) rotate(0deg);
}

.doublerotatesize:hover {
    transform: scale(2) rotate(360deg);
}

但是如果可能的话,我希望能够将每个类别与另一个类别分开.

在CSS中使用transform属性时,可能的方法之一是matrix需要6个输入字段的方法.CSS代码看起来像......

#test{
    transform: matrix(1, 0, 0, 1, 0, 0);
}

还有其他几种变体(取决于浏览器)......

-ms-transform: matrix(1, 0, 0, 1, 0, 0);

-webkit-transform: matrix(1, 0, 0, 1, 0, 0);

我知道上面显示的值是对象的库存值,但所有数字的含义是什么？

所有,

我希望能够使用translateX它的父元素(即,从左边缘到右边缘)100%的方式为子元素设置动画.

挑战在于百分比是translateX指元素本身,而不是父母.

所以,例如,如果我的html看起来像这样:

<div id="parent">
    <div id="child">
</div>

我的CSS就像这样(省略了供应商前缀):

#parent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: black;
}
#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    transform: translateX(100%);
}

这不起作用 - 孩子只移动20px(自身的100%),而不是整个父移动.(你可以在jsfiddle上看到这个):

我可以做这个:

#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    -webkit-transform: translateX(300px) translateX(-100%);
    transform: translateX(300px) translateX(-100%);
}

这工作(在jsfiddle上再次看到 ),因为它首先移动子300px(父的全宽),减去20px(子的宽度).然而,这取决于具有固定的已知像素尺寸的父母.

但是,在我的响应式设计中 - 我不知道父级的宽度,它会改变.

我知道我可以使用left:0和right:0,但是左/右的动画性能比translateX差很多(感谢Paul Irish!).

有没有办法做到这一点？

提前致谢.

我很困惑.为什么我不能同时使用刻度和旋转？我试过这个,但它不起作用:

.rotate-img{
    -webkit-transform:scale(2,2);
    -webkit-transform:rotate(90deg);
    margin-left:20%;
    margin-top:10%;
}

我尝试过jQuery,但两种方法都不起作用:

<style>
.zoom{
        -webkit-transform:scale(2,2);
        margin-left:20%;
        margin-top:10%;
    }
</style>
<script>

    $(document).ready(function(){
        $("img").dblclick(function(){

            $(this).addClass("zoom");

            $(this).contextmenu(function(){
                $(this).css("-webkit-transform","rotate(90deg)");
                return false;
            })
        });
    })

    </script>

我怎么能缩放img,当我点击右键然后旋转90度.