标签: css-transforms

我想要实现的是从 js 两次更改某些属性（background-color在上面的代码中），以便在它们之间运行转换，但不会从前一个状态到第一个状态。上面的代码几乎从不工作，因为超时设置为零，当它至少设置为 10 时，它几乎总是工作，当我将其设置为 100 时，它总是在我的机器上工作。我还想要的是完全避免超时和以太线性运行代码或基于适当的事件回调运行代码（到目前为止我没有发现任何有用的）。

这是一个示例（也在 jsFiddle 上）：

var outter = document.getElementById('outter');
var test = document.getElementById('test');

test.onclick = function() {
  outter.removeChild(test);
    test.style.backgroundColor = 'green'
  outter.appendChild(test);
  setTimeout(function() {
    test.style.backgroundColor = 'red'
  }, 0);
}

#test {
  position: fixed;
  left: 2em;
  right: 2em;
  top: 2em;
  bottom: 2em;
  background-color:red;

  transition-duration: 2s
}

<div id=outter>
  <div id=test></div>
</div>

悬停时我想缩放圆形的背景图像而不进行过渡，它适用于所有浏览器，但在 safari 中进行过渡则有问题。

我有这个小提琴https://jsfiddle.net/yv0a6hnv/4/一切都在 chrome 中完美运行，但在 safari 中转换有问题如何修复它？提前致谢。

.circle-box{
  overflow:hidden;
  -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
  display: block;
}
.circle {
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative; /* If you want text inside of it */
  	transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
      background-position:center;
  background-image: url("http://www.planwallpaper.com/static/images/6768666-1080p-wallpapers.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%; …

希望有人知道该怎么做并可以帮助我：

一个函数可以做到这一点：

element.setAttributeNS(null, \'transform\', s);\nif (\'transform\' in element.style) {\n  element.style.transform = s;\n} else if (\'-ms-transform\' in element.style) {\n  element.style[\'-ms-transform\'] = s;\n} else if (\'-webkit-transform\' in element.style) {\n  element.style[\'-webkit-transform\'] = s;\n}\n

其中“s”是这样的：\ns = \'matrix(\' + matrix.a + \',\' + matrix.b + \',\' + matrix.c + \',\' + matrix.d + \',\' + matrix.e + \',\' + matrix.f + \')\'

它与此完美配合。\n对于硬件加速，我想添加+ \' translateZ(0)\'“s”。

执行此操作后，我收到以下错误：

\n

错误：< g> 属性转换：需要 \'(\', "\xe2\x80\xa639394) 翻译 Z(0)"。

\n

我希望能够在图像放大后在其容器内移动 img，因为正如您所看到的，一旦您单击图像，它就会变得太大而您看不到整个图像。另外，一旦图像未被悬停，如何使图像恢复正常？提前致谢。

// Zoom in/out clothing img
  $('.image').click(function() {
    $(this).toggleClass('normal-zoom zoom-in');
  });

.container {
  width: 800px;
  margin: 0 auto;
  border: 2px solid black;
  display: flex;
}

.img-wrapper {
  margin: 10px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
}

.text {
  width: 40%;
  padding: 20px;
}

.normal-zoom {
  transform: scale(1);
  cursor: zoom-in;
  transition: all 250ms;
}

.zoom-in {
  transform: scale(1.6);
  cursor: zoom-out;
  transition: all 250ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="img-wrapper">
    <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
  </div>
  <p class="text">Kept …

参考此链接：https : //developer.mozilla.org/en-US/docs/Web/CSS/perspective

必须设置透视以沿 z 轴移动子元素。上面的链接显示了不同透视值的示例，所有这些值都将 z 轴设置为对角线方向。

如果我直视 3D 立方体的表面并将其向后移动（沿 z 轴），它看起来会变小（远离我），而不是对角移动。那么为什么 CSS 默认有一个对角线 z 轴呢？有没有办法在 z 轴完全远离用户的情况下使用透视和 ​​translateZ？

我一直在测试的一些代码：

.wrapper {
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  transform-style: preserve-3d;
}

.cube {
  transform-origin: 50% 50%;
  transform: translateZ(-1px);
}

<div class="wrapper">
  <div class="cube"></div>
</div>

我正在尝试将带有背景图像的方形 div 转换为梯形。

我想以 2D 形式制作它，就像 Photoshop 的“扭曲”工具一样。

基本上，我想要的只是缩小正方形的顶边并使图像相应变形。

3D 变换“似乎”达到了目的：

transform: rotateX(30deg);\n

它适用于大多数用例，但不是所有用例。\n事实上，它是正方形的 30 度旋转，从正面/背面看时“看起来”像梯形，但当从正面/背面看时，它仍然是 30\xc2\xb0 旋转的正方形从任何其他方面看。

我想要的是得到一个真正的梯形。我希望方形图像以 2D 方式扭曲，以便形状和图像实际上发生变化，而不涉及旋转。

我尝试了这个，它在形状（梯形）方面有效：

border-style: solid;\nheight: 0;\nborder-color: transparent transparent red transparent;\nborder-width: 0 100px 100px 100px;\n

但是我无法用失真后的背景图像替换红色区域。这违背了我的目的。\n我尝试的任何尝试都使图片保持不变形。

有没有任何 css/html5/javascript 技巧可以实现我想要的？

谢谢。

如何使用CSS3动画应用多个变换？

这是我的HTML代码:

<div class="container">
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
</div>

我的尝试:

@-webkit-keyframes firstanim{
    from{
        -webkit-transform:scale(1);
        -webkit-transform:rotate(0deg);
    backgroud:skyblue;
    left:0px;

    -webkit-transform: rotateY(0deg);
   }    to{
    -webkit-transform:rotate(360deg);
    -webkit-transform:scale(1.5);
    background:orange;
    left:100px;
    -webkit-transform: rotateY(360deg);
   }
}


.container{
    border:1px solid black;
    padding:20px;
    width:250px;
    height:50px;
    position:realtive;
}
.cell{
    width:25px;
    height:25px;

    background:skyblue;

    float:left;
    display:inline-block;
    margin:0px 5px;
    position:relative;
    -webkit-animation: firstanim 3s infinite;

}
.inner{
 width:100%;
 height:50%;
 float:left;

    border:1px solid white;
    border-left-width:0px;
    borer-right-width:0px;
}

结果位于此处 …

尝试使用CSS动画和变换应用缩放背景图像,但似乎有点滞后:

在线复制

我能做些什么吗？

@keyframes animateBg {
  from {
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    visibility: visible;
  }

  to {
    -ms-transform: scale(1.45, 1.45);
    transform: scale(1.45, 1.45);
  }
}
.animate-bg{
    -webkit-animation-name: animateBg;
    animation-name: animateBg;

}
.animate{
  -webkit-animation-duration: 5000ms;
  animation-duration: 5000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-timing-function: cubic-bezier(.3,0,.7,1);
  timing-function: cubic-bezier(.3,0,.7,1);
}

.bg{
    background-image: url(http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg);
    height: 100%;
    width: 100%;
    display: block;
    position:absolute;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-position: center;
    background-size: cover;
}

我想用背后的阴影制作文字效果,如下所示:

这是我的代码:

span {
  font-family: Calibri;
  font-size: 110pt;
  text-shadow: -14pt 18pt 4pt rgba(0,0,0,0.5);
}

<span>Text</span>

但这个简单的文字阴影,我需要改造它.如何使用CSS创建此效果,只有一个 HTML标签<span>？
感谢帮助.

每当我点击它时,我想要div它translate,然后rotate,最后scale.此外,reverse it back当我再次点击时,我想以同样的方式

我有以下代码:

$(() => {
  $('div').on('click', () => {
    $('div').toggleClass('clicked');
  });
});

div.normal {
  height: 20px;
  width: 100px;
  background: black;
  transition: 2s all;
}
div.clicked {
  transform: translate(100px, 100px) rotate(45deg) scale(2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='normal'></div>

如您所见,所有转换都在同一时间发生.但是,我希望它们分开发生.我该如何实现这一目标？

提前致谢!