标签: css-transforms

以下CSS在Webkit中工作正常.没有在Opera中检查它,但我知道它在Firefox中不起作用.谁能告诉我为什么？

正确的类肯定会应用到我的HTML(用Firebug检查它,我确实看到了-moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot属性.arrow).

这在IE9中也不起作用,虽然我最初有-ms-animation:...和-ms-transform:....我认为它应该在IE9中工作,但是当它没有时,我只是假设IE不支持这些.但是,现在它不能在Firefox中运行,也许还有其他事情正在发生.

.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.dot .dvd .arrow {
  -webkit-animation: arrowRotateDot 500ms forwards;
  -moz-animation: arrowRotateDot 500ms forwards;
  -o-animation: arrowRotateDot 500ms forwards;
  animation: arrowRotateDot 500ms forwards;
}
.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.f2 .dvd .arrow {
  -webkit-animation: arrowRotateF2 500ms forwards;
  -moz-animation: arrowRotateF2 500ms forwards;
  -o-animation: arrowRotateF2 500ms forwards;
  animation: arrowRotateF2 500ms forwards;
}

@-webkit-keyframes arrowRotateDot {
  100%  {
      left:-18px; top:182px;
      -moz-transform: …

基本上,如果你看一下这个,你会看到我有一个元素,其中应用了一个生成内容的变换.该:after元素应该出现在后面,div但事实并非如此.没有任何数量的!important影响.

如何让伪元素出现在div？后面？

我不关心IE 8或更低版本.

如何使用CSS创建如下图像的功能区.我知道如何制作带有文字的倾斜填充盒子,但我挣扎着襟翼.

这是codepen链接

我试图得到一个偏斜的导航,但链接正在与导航器倾斜.我理解代码应该工作,如果它是这样的:

#nav {
   transform: skew(-15deg);
}
#nav li {
   transform: skew(15deg);
}

但那不起作用.这是一个小提琴:http://jsfiddle.net/U5mq5/

再一次,我希望我的导航能够是直的,而不是倾斜的.救命？

我有一个600x400px的图像,并希望它在240x200px的较小div中,但图像缩小或变形.我希望原始大小的图像以较小的div为中心,这会隐藏一些图像

我写了这个CSS规则来应用于不同的图像大小.

.theBox {
   float: left;
   overflow: hidden;
   width: 240px;
   height: 200px;
}

.theBox img {
   display: block;
   height:100% !important;
   width:100% !important;
 }

比方说,我有一个div是有translateX和translateY值动态增加.

<div class="object child0" 
     style="-webkit-transform: translateX(873.5px) translateY(256px); 
            width: 50px; height: 50px;">

我想添加rotateY(20deg)到当前的转换,但通过element.style.webkitTransform = "rotateX(20deg)"丢失其他值来应用它 .

有没有办法添加rotateY而不丢失translateX和translateY转换？

我正试图用这样的CSS制作3D卡翻​​转效果.

不同之处在于我只想使用CSS来实现它.

这是我试过的代码:

/*** LESS: ***/

    .card-container {
        position: relative;
        height: 12rem;
        width: 9rem;
        perspective: 30rem;
        .card {
            position: absolute;
            width: 100%;
            height: 100%;            
            div {
                position: absolute;
                height: 100%;
                width: 100%;
            }
            .front {
                background-color: #66ccff;
            }
            .back {
                background-color: #dd8800;
                backface-visibility: hidden;
                transition: transform 1s;
                &:hover {
                    transform: rotateY(180deg);
                }
            }
        }
    }

HTML:
<div class="card-container">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

问题是卡片没有翻转,它从后到后按下这样:

是否可以仅使用CSS实现这种3D卡翻​​转悬停效果？

我有一个翻译的flex项目仍然占据其原始空间的问题,以便下面的flex项目不会立即跟随.有关更多详细信息,请参阅JSFiddle或代码段.我希望绿色矩形紧跟在红色之后,以便在边框内可见.遗憾的是,我不能翻译父级,它会溢出:隐藏,以便只有边框内的子项可见.

这是一个JSFiddle https://jsfiddle.net/3wv9d9dm/

或者一个片段:

.parent {
  display: flex;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

.child {
  flex: 0 0 100%;
}

<div class="parent">
  <div class="child" style="background-color:red;transform:translateX(-100%);"><h1>1</h1></div>
  <div class="child" style="background-color:green;"><h1>2</h1></div>
  <div class="child" style="background-color:blue;"><h1>3</h1></div>
</div>

可能比CSS更多的数学,但我正在尝试确定一种在应用CSS skewY变换后调整div定位的方法.

在下面的代码片段中,带有蓝色边框的div应用了3.5deg skewY,我想知道是否有一种数学方法可以知道top应用于蓝色div的数量,以便右上角始终完美无论两个div的宽度如何,都使用红色边框与div的右上角对齐.

我使用%和玩过数字vw,但我正在寻找一个可靠的基于数学的解决方案.

.parent {
  border: 1px solid red;
  position: relative;
  margin-top: 100px;
  height: 200px;
}

.child {
  border: 1px solid blue;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: skewY(-3.5deg);
}

<div class="parent">
  <div class="child">
    content
  </div>
</div>

如何以循环方式堆叠div，使最后一个div应该位于第一个div之下但位于第二个div之上。CSS可能吗？任何帮助将不胜感激。

请找到Codepen。提供示例代码段

<div class="frame">
  <div class="lolly-pop__wrapper">
    <div class="lollypop-top">
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
    </div>
  </div>
</div>


.frame {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  background: #F5CE51;
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; …