标签: css-transforms

我想E在单词中反映字母,WEBLOG所以我使用了CSS转换属性,但是如果我将文本包装在一个span中,它就不起作用但是如果我在分配display: inline-block;或display: block;

所以变换不适用于内联元素？

示例1(无法转换)

<h1>W<span>E</span>BLOG</h1>

h1 span {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
}

示例2(Works,如果使用display: blockORdisplay: inline-block)

我在使用css3变换旋转过渡的chrome中遇到了问题.转换工作正常,但在完成后元素移动一个像素.另一个奇怪的事情是它只在页面居中(margin:0 auto;)时才会发生.如果你也删除了转换,那么bug仍然存在.

你可以在这里看到它:

http://jsfiddle.net/MfUMd/1/

HTML:

<div class="wrap">
    <img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>

<div class="wrap">
    <div class="block"></div>
</div>

CSS:

.wrap {
    margin:50px auto;
    width: 100px;
}
.block {
    width:30px;
    height:30px;
    background:black;
}
.target,.block {
    display:block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.target:hover,.block:hover {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

注释掉该margin:0 auto;线以使其消失.

任何人都有任何想法如何在保持页面居中的同时阻止这一点？

我在OSX 10.6.8上使用的是版本24.0.1312.57

干杯

如何重置CSS transform属性CSS translate值？

说我有:

div.someclass {
    -webkit-transform: translate3d(0, -50%, 0);
       -moz-transform: translate(0, -50%);
        -ms-transform: translate(0,- 50%);
         -o-transform: translate(0, -50%);
            transform: translate3d(0, -50%, 0);
}

那么如何清除所有变换/翻译？

我应该使用: translate(0, 0);/translate3d(0, 0, 0); 或 transform:auto;？

我发现了这个:变换后的宽度/高度

还有其他几个,但没有什么不是我想要的.我想要的是将某些东西缩放到它的大小的50%(当然有很好的动画过渡)并让页面布局重新调整到元素的新(可视)大小.默认情况下似乎发生的是元素仍然在布局结构中保留其原始大小,并且仅使用关联的转换绘制.

基本上我希望用户点击一个文本块(或其他内容),然后将该文本缩放到它的大小的50%(或其他),并将其粘贴在下面的面板中以指示它已被选中.移动它后,我不希望元素周围有50%的空白.

我已经尝试重新设置高度/宽度,但这会导致元素自身进行新的布局,然后将比例应用于新布局,这仍然会在完成后留下50%的空白区域.我的mozilla特定(为简单起见)代码如下所示:

<script type="text/javascript">
 function zap(e) {

  var height = e.parentNode.offsetHeight/2 + 'px';
  var width = e.parentNode.offsetWidth/2 + 'px';
  e.parentNode.style.MozTransform='scale(0.0)'; 
  e.parentNode.addEventListener(
    'transitionend', 
    function() { 
      var selectionsArea = document.getElementById("selected");
      selectionsArea.appendChild(e.parentNode);
      e.parentNode.style.MozTransform='scale(0.5,0.5)'; 
      e.parentNode.style.display = 'inline-block';
      e.parentNode.style.height = height;
      e.parentNode.style.width = width;
    },
    true) 
}
</script>

我真的希望我不必为了达到这个目的而弄清楚负利润或相对定位......

编辑:自写这篇文章以来,我发现了一个非常相似的问题,没有评论或答案.它略有不同,因为我不关心它是一个html5特定的解决方案,我怀疑解决方案要么不存在,要么在CSS/javascript中,无论html级别如何.

使用CSS3变换scale()缩放/缩放DOM元素及其占用的空间

编辑2 :(另一次非工作尝试)

我也尝试过这个,但是缩放和平移函数似乎以一种使最终位置无法预测的方式相互作用......并且变换前的缩放似乎与变换然后缩放相同.不幸的是,这不仅仅是通过比例因子调整翻译的问题......

function posX(e) {
    return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
}

function posY(e) {
    return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
}

function placeThumbNail(e, …

我希望有一种相对简单的方法可以将网页旋转一点点,大约30度左右,同时仍然保持功能齐全和可用.

我完全控制页面,并可以修改它,以便在需要时更容易.不过,我宁愿不在SVG中重写整个内容,但也许javascript和canvas会起作用吗？

有没有办法使用CSS,Javascript或其他一些允许我完成此操作的跨浏览器方法？

好的,所以这是另一个IE10故障.问题是在父元素上应用透视会破坏背面可见性隐藏设置.请看这个小提琴:http://jsfiddle.net/2y4eA

当您将鼠标悬停在红色方块上时,它会在x轴上旋转180°,即使背面可见性设置为隐藏,也会显示背面,至少在达到180°之前,它会消失.删除透视属性,您将看到它按预期工作,背面根本不可见,但当然3D效果丢失.

通过在transform属性中应用透视可以解决这个问题:http://jsfiddle.net/M2pyb但这会导致与transform-origin-z结合的问题,当z被设置为0以外的任何东西时,整个事情变得"缩放":http://jsfiddle.net/s4ndv所以不幸的是,这不是一个解决方案.

背面可见的东西可能是一个错误？如果是这样,除了我提到的那个之外,还有其他工作吗？

我想知道如何在悬停时制作旋转或旋转的图像.我想知道如何使用CSS在以下代码上模拟该功能:

img {
  border-radius: 50%;
}

<img src="http://i.imgur.com/3DWAbmN.jpg" />

我正在应用CSS转换(以及特定于浏览器的-webkit,-o等):

transform:matrix(0.5,0,0,0.5,0,0);

到div然后使用jQuery的draggable()和resizable()插件对所述div的孩子.

我遇到的问题是,在拖动或调整子元素大小时,jQuery所做的更改与鼠标"同步"的因子等于应用的比例.

我在stackoverflow上找到了一个解决方案(虽然我愚蠢地没有将它加入书签但现在无法找到它......)建议修补插件,并且它运行得非常好.它沿着这条线走:

function monkeyPatch_mouseStart() {
  // don't really need this, but in case I did, I could store it and chain
  // var oldFn = $.ui.draggable.prototype._mouseStart ;
  $.ui.draggable.prototype._mouseStart = function(event) {

    var o = this.options;

    //Create and append the visible helper
    this.helper = this._createHelper(event);

    //Cache the helper size
    this._cacheHelperProportions();

    //If ddmanager is used for droppables, set the global draggable
    if($.ui.ddmanager)
      $.ui.ddmanager.current = this;

    /*
     * - Position generation -
     * This block generates everything position related - …

我试图在边界上悬停时扩展的边界上获得过渡悬停效果.

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: left 250ms ease-in-out, right 250ms ease-in-out;
  opacity: 0;
}

h1:hover:after {
  opacity: 1;
}

<h1>CSS IS AWESOME</h1>

我在Jsfiddle上尝试过这个

考虑以下小提琴

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

转换在FF中顺利进行,但在Safari或Chrome(在我的Mac上)根本没有转换.

转换属性是否加上前缀或我的代码中是否存在某种语法错误？