标签: css-transforms

我正在制作贺卡.当用户点击卡片时,它将打开并显示其内容.我如何在CSS和JavaScript中做到这一点？我正在使用透视和旋转,你可以在这里看到.如果你知道一个看起来像我正在尝试做的例子,请发布链接.

我正在试图弄清楚如何"动画"悬停元素的孩子.如何让它在多个浏览器中运行如此复杂？
什么是最佳做法？

.parent {
    -moz-transition:-moz-transform 180ms;
    -webkit-transition:-webkit-transform 180ms;
    -o-transition:-o-transform 180ms;
    transition:transform 180ms;
}
.parent:hover > .child {
    transform: translate(0,-42px);
}

http://jsfiddle.net/KKrdA/2/ 在firefox
或

.parent {
    -moz-transition:top 180ms;
    -webkit-transition:top 180ms;
    -o-transition:top 180ms;
    transition:top 180ms;
}
.parent:hover > .child {
   top:-42px;
}

http://jsfiddle.net/KKrdA/1/ 适用于webkit浏览器

我在IE 10中可以点击div的问题.他们有CSS3过渡并对它们进行转换.它们的动画效果正确,但链接无法点击.这适用于IE 11,FF和Chrome.锚也不会在IE 9及以下版本中工作,但CSS也不会转换.我不知道为什么这在IE 10中不起作用.

我不会在这里发布我的CSS,因为它相当长.我添加了一个小提琴,用于查看完整的CSS.

HTML:

<div class="grid">
    <figure class="effect-bubba columns large-4">
        <img alt="" src="http://www.blackduckmn.com/_images/home/blackduck-minnesota-apple.JPG" />
        <figcaption>
             <h2>Lodging &amp; Dining</h2>

             <p>Whatever you're looking for, Blackduck has a variety of lodging and dining options available!</p> <a href="/visit/lodging-and-dining">View more</a>

        </figcaption>
    </figure>
</div>

JS小提琴:http://jsfiddle.net/phorden/oysn4rgv/

实况页面:http://www.blackduckmn.com/

我正在尝试构建响应式轮播,并在以下代码中收到错误.我尝试过使用JQuery,其他选择方法,但它们都返回相同的错误.

我尝试在这里选择元素,首先我访问其父元素

     var carousel = $('#carousel');
     var container = carousel.querySelector('.carousel-container');

关于代码返回和carousel.querySelector不是函数的错误.

这会产生问题,并且还会破坏下面的调整大小功能:

  function slideTo(index){
      index = index < 0 ? totalItems -1 : index >= totalItems ? 0 : index;
      container.style = container.style.transform = 'translate(-' + (index * percent) + '%, 0)';
       currentIndex = index;
   }

函数第三行中的Container.style返回一个ERROR,我无法在container.style上设置属性,因为它是"未定义"

我真的只需要能够将CSS"transform:translate"属性添加到容器元素中.

对于要尝试的事情我感到茫然...真的很感激一些反馈!

我正在为我的手机用Apache-Cordova做一点应用程序.因此,我希望div和它的内容是颠倒的.我试过了

transform: rotation(180deg);

和

transform: scale(1, -1);

至今.在我的Firefox中,它们按照需要工作,但在我的手机上没有任何改变.所以我不知道为什么或任何其他可能性.

有谁知道为什么会这样或有其他想法？

Apache Cordova不支持CSS3吗？

谢谢你的帮助.

有没有一种方法可以通过CSS3关键帧转换将不透明度从0缓慢地波动到1（重复）？还是这需要在间隔内切换的类中具有过渡不透明度的jQuery或Javascript？

我正在尝试将其应用于我的轨道转换（如下）。（我正在制作动态壁纸背景效果，使多个不透明图像漂浮在我在Objective C中构建的安装程序应用程序的侧边栏中。）

.orbit1
{
animation: myOrbit 200s linear infinite;
}

.orbit2
{
animation: myOrbit2 200s linear infinite;
}

@keyframes myOrbit1 
{
    from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}

@keyframes myOrbit2 
{
    from { transform: rotate(360deg) translateX(250px) rotate(-360deg) }
    to   { transform: rotate(0deg) translateX(250px) rotate(0deg) }
}

我重新创建了模板中遇到的问题。有一个导航有position: relative;。内部资产净值有一个DIV嵌套两个列表。
名单之一是绝对要坚持导航的位置。当div对其应用了转换时，就会发生此问题。
当绝对位置和相对位置的元素之间的div获得了transform属性时，绝对列表相对于div而不是nav进行定位。

MDN文档声明以下有关位置的信息：绝对

不要为元素留出空间。而是将其放置在相对于其最接近的祖先的指定位置（如果有），或者相对于其包含的块。绝对定位的框可以有边距，并且不会与其他任何边距一起折叠。

这是否意味着变换后的元素是定位元素？为什么这样做呢？我在Edge，FF和Chrome中进行了测试。他们的行为都一样。

您可以在下面运行重新创建的代码段。我正在将鼠标悬停在div上的div上应用转换。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body{
  min-height: 100%;
  height: 100%;
}
nav{
  background: #000;
  height: 100%;
  width: 50%;
  position: relative;
}
nav:hover > div{
      transform: translateX(50px) translateY(0) translateZ(0);
}
a{
  color: #fff;
}
ul{
  padding: 16px;
}
ul.main{
  background: blue;
}

ul.lower{
  position: absolute;
  background: red;
  bottom: 0;
  width: 100%; …

我有以下 div

<div style="transform-origin: left top 0px; transform: translate3d(0px, -26px, 0px) scale(1);">

如您所见，transform包含scale(1)。改变scale价值的最佳方法是什么？

谢谢您的帮助。

基本上我正试图创建我在这个网站上找到的这种翻转效果

单击最右边的箭头(以查看在彩色部分最右侧悬停的箭头)可以看到对主标题和副标题的影响,这会使标题向上翻转.

我真的不知道怎么做这个效果,所以我在网上找到了一个例子,但问题是它有悬停状态,我无法理解如何让它在页面加载时自动启动而不是徘徊.正如你在这个例子中看到的那样,反面A和B都是彩色的,我希望从A面开始是背景白色,文字是白色然后将其翻转成彩色版本,所以用其他单词从不可见到可见.

在这里查看我的工作演示

此示例的代码如下:

/* Set-up */
body {
  color: rgb(6, 106, 117);
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 100%;
  background: #F4F6F8;
  padding: 3em 0 0 0;
  line-height: 62px;
  -webkit-perspective: 1000px;  /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
  width: 30%;
  text-align: center;
  margin: 0 auto;
  height: 100px;
  -webkit-transition: -webkit-transform .33s;
  transition: transform .33s;  /* Animate the transform properties */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  /* <-NB */
}
/* …

我正在尝试在矩形悬停时制作动画。我要达到的目的是使Rectangle在显示的倾斜角度上占据整个高度，而我不想拉直。到目前为止，这是我所做的。我也使用了转换矩阵，但效果不佳

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  -webkit-transform: skew(-25deg);
  -moz-transform: skew(-25deg);
  -ms-transform: skew(-25deg);
  -o-transform: skew(-25deg);
  transform: skew(-25deg);
  transition: transform 1s;
}

.square:hover {
  transform: scaleY(50);
}

<div class="square"></div>