标签: css-transforms

目前我正在使用以下代码以相同的速度翻译x和y:

-webkit-transition:all 180ms ease-out;

我想将X轴转换得比Y慢.是否可以指定类似于:

-webkit-transition:translateX 180ms ease-out;
-webkit-transition:translateY 50ms ease-out;

提前致谢!

我制作了一些CSS动画,在WebKit(Safari/Chrome)上,它运行正常,但在Firefox上,时机搞定了.

JSFiddle:http://jsfiddle.net/jmorais/p5XCD/1/

码:

var open = false;
  var intransition = false;

  function openCard() {
    intransition = true;
    $('.out').addClass('openingOut');
    $('.in-left').addClass('openingIn');
    setTimeout(function() {
        $('.out').css("z-index", "2");
        $('.in-left').css("z-index", "3");
        }, 850);
    setTimeout(function(){
        $('.out').removeClass('openingOut').addClass('outOpen');
        $('.in-left').removeClass('openingIn').addClass('inOpen');
        open = true;
        intransition = false;
        }, 3000);
  }

function closeCard() {
  intransition = true;
  $('.out').addClass('closingOut');
  $('.in-left').addClass('closingIn');

  setTimeout(function() {
      $('.out').css("z-index", "3");
      $('.in-left').css("z-index", "2");
      }, 1000);
  setTimeout(function(){
      $('.out').removeClass('closingOut').removeClass('outOpen');
      $('.in-left').removeClass('closingIn').removeClass('inOpen');
      open = false;
      intransition = false;
      }, 3000);

}

function toggleCard() {

  if (intransition) { return; }

  if (open) …

在HTML5中,我想将转换功能实现为canvas元素,因此用户可以translate(移动),scale(放大/缩小)和rotatecanvas元素.每个这样的变换可以用不同的变换原点完成.

第一次转变很容易:

function transform(el, value, origin) {
  el.style.Transform = value;
  el.style.MozTransform = value;
  el.style.msTransform = value;
  el.style.OTransform = value;
  el.style.webkitTransform = value;
  el.style.TransformOrigin = origin;
  el.style.MozTransformOrigin = origin;
  el.style.msTransformOrigin = origin;
  el.style.OTransformOrigin = origin;
  el.style.webkitTransformOrigin = origin;
}

transform(myCanvas, 'translate('+ dx +'px, ' + dy + 'px) ' +
                    'scale(' + zoom + ', ' + zoom + ') ' +
                    'rotate(' + angle + 'deg)',
                    cx + 'px ' + cy + 'px'); …

我创建了一个简单的树菜单.切换的项目使用JQuery来显示他们的孩子并切换一个"开放"类.

我在项目上有一个":before"加号,打开时它会旋转135度到x,看动画gif:

如你所见,它会"向上"旋转.我希望它围绕它的中心旋转(我认为这是默认值).这是我的代码:

.nav-header {
    color: gray;
    font-weight: bold;
    font-size: 16px;
    padding-top: 10px;
    cursor: pointer;
    &:before {
        content: '+';
        font-size: 23px;
        display: inline-block;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
    &.open {
        &:before {
            -webkit-transform-origin: center center;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            -o-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
        }

我使用以下代码来实现translation单击时的简单对象.

HTML

<div id="div1"></div>

CSS

#div1 {
    width:30px;
    height:30px;
    background-color:green;
    cursor:pointer;
    transition: all 0.5s ease;
}
#div1:hover {
    background-color:red;
}

.pushObject {
    transform: translate(250px, 0px);

}

JavaScript(jQuery)

$('#div1').on('click', function () {
    $(this).toggleClass('pushObject');
});

它按预期工作,我得到一个平滑的0.5秒动画all的转换(在这种情况下translate以及hover),因为我已将transition-propertycss中的值设置为all.

我想要的是将这个0.5s限制Transition为translate仅,而不是hover.

这可以通过transition-property在css中设置正确来实现,但我无法找到正确的值.

那么transition-property这里的正确值是什么,以便动画仅适用translate于任何其他动画,而不适用于任何其他动画transition.

这是一个JsFiddle.

在Firefox中，三角形是否具有锯齿状/锯齿状的边缘（无论是否旋转）。

参见小提琴：

CSS（html只是<div></div>）

div {
    border-top: 10px solid rgba(255, 255, 255, 0);
    border-right: 70px solid #777;
    border-bottom: 10px solid rgba(255, 255, 255, 0);
    transform: rotate(90deg);
}

对于填充其框的形状，可以应用outline: 1px solid transparent。

对于未旋转的形状，您可以简单地应用transform: scale(.999)（位于SO上）。

但是，如果我将CSS的最后一行更改为transform: rotate(90deg) scale(.999)，仍然会出现别名。

早在12年就提交并仍标记为“新”的错误，在某种程度上是相关的，并且尚未尝试解决。

是否有其他解决方法可在Firefox中获得平滑的旋转三角形？摆脱中间的发际线将是一个加号。

我正在使用此处提供的代码:S/O 2-face Animated Cube

我想让这个效果填满网页的整个屏幕,以提供从一个div/iframe到下一个div/iframe的全屏转换.

我尝试使用百分比:

<style>
#experiment {
    -webkit-perspective: 1000;
}
html,body{
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.cube {
    position: relative;
    height: 100%; //<----
    width: 100%; //<----
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;
}
.face {
    position: absolute;
    height: 100%; //<----
    width: 100%; //<----
    color: #fff;
}
.cube .front {
 -webkit-transform: translateZ(50%); //50% should make sense, but doesn't work so I went to Javascript instead
 background-color:gray;
}

.cube .side {
 -webkit-transform: rotateX(-90deg) translateZ(50%);
 background-color:lightgray; …

我有一个特定风格的问题.我在div中使用CSS变换旋转字符串"Historic",位于兄弟div的特定部分.如果我通过"Historique"(对于i18n)更改字符串,则div移动.

我希望div在字符串改变时保持在同一个地方.谢谢你的回答.

#main {
	margin: 50px;
	position: relative;
	width: 300px;
	background: #eee;
	border: thin solid #bbb;
}

#tag {
	position: absolute;
    left: -36px;
    padding: 5px;
    font-size: 9px;
    transform: rotate(-90deg);
    background: red;
    color: white;
    bottom: 15px;
    text-transform: uppercase;
    max-height: 20px;
}

.content {
	display: flex;
	position: relative;
	padding: 20px;
}

<div id="main">
	<div id="tag">Historic</div>
	<div class="content">a</div>
	<div class="content">b</div>
	<div class="content">c</div>
</div>

我正在编写一个脚本,根据光标位置左右变换调整图像.
还有一些CSS可以在悬停时缩放图像.

// JavaScript source code
var catchX = 0,
    catchY = 0,
    x = 0,
    y = 0,
    burn = 1 / 28;

function imageWatch() {
    x += (catchX - x) * burn;

    translate = 'translate(' + x + 'px, ' + y + 'px)';

    $('.image-area img').css({
        '-webit-transform': translate,
        '-moz-transform': translate,
        'transform': translate
    });

    window.requestAnimationFrame(imageWatch);
}

$(window).on('mousemove click', function (e) {

    var mouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
    catchX = (26 * mouseX) / 100;

}); …

我要在纯CSS中创建以下黄金分界线。

我正在尝试使用transform:scale;CSS 创建此文件，到目前为止，我发现了以下内容：

.border_angle {
	border: 50vw solid transparent;
	width: 0;
	height: 0;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-top-color: transparent;

	transform: scaleY(0.105) translateY(-50%);
	-webkit-transform: scaleY(0.105) translateY(-50%);
	-o-transform: scaleY(0.105) translateY(-50%);
	-moz-transform: scaleY(0.105) translateY(-50%);
	-ms-transform: scaleY(0.105) translateY(-50%);
	
	position: absolute;
	transform-origin: top center;
	top: 0;
	left: 0;
	right: 0;
	z-index: 11;
}

.border_angle_gold_l {
	border-left-color: #BE955A;
}

.border_angle_gold-light_r {
	border-right-color: #CCA56B;
}

<div style="margin-top: 200px;" class="border_angle border_angle_gold_l border_angle_gold-light_r"></div>

本质上，我几乎拥有它，但是我只需要反转三角形即可！！我不知道如何...任何帮助将不胜感激。