标签: css-transforms

我试图使用CSS Transform属性旋转或转换div.这是我的转换CSS代码:

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
transform: rotate(270deg);

除了IE 8之外,上面的代码工作得很好.我需要找到一种方法来支持IE 8.

如何为IE8创建后备？

注意:我正在使用jQuery(1.8.2),HTML 5 Doctype和modernizr,如果这会对您提供的答案产生影响.我更喜欢只有CSS的解决方案,但愿意使用javascript/jQuery解决方案.

这是HTML和CSS的小提琴.

我正在尝试在左侧创建一个带有选项卡的基本门户,而不是在顶部.理想情况下,我想在没有任何JavaScript的情况下完成此任务; 仅限HTML5和CSS3.

我一直在玩水平标签的以下代码:http://jsfiddle.net/Juggler/9Ue9j/2/

<div id="page-wrap">
    <div class="tabs">
        <div class="tab">
            <input type="radio" id="tab-1" name="tab-group-1" checked>
            <label for="tab-1">Tab One</label>
            <div class="content">
                <p>Stuff for Tab One</p>
            </div> 
        </div>
        <div class="tab">
            <input type="radio" id="tab-2" name="tab-group-1">
            <label for="tab-2">Tab Two</label>
            <div class="content">
                <p>Stuff for Tab Two</p>
            </div> 
        </div>
        <div class="tab">
            <input type="radio" id="tab-3" name="tab-group-1">
            <label for="tab-3">Tab Three</label>
            <div class="content">
                <p>Stuff for Tab Three</p>
            </div> 
        </div>
    </div>
</div>

和

* {
  margin: 0;
  padding: 0;
}
body {
    background: #999;  
}
#page-wrap {
  width: …

我有一个旋转45度的div,上面有一个边框图像.

在铬和野生动物园,它呈现罚款.

在firefox中,令人讨厌的抗锯齿线出现在旋转div的边缘周围,在它的边缘和边框图像之间.

这是简单的HTML:

<div class="container">

   <div class="corner">

   </div>

</div>

这是CSS:

.container {
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: black;
    outline: 1px solid #333333;
    position: relative;
    overflow: hidden;
}

.corner {
    position: absolute;
    bottom: -68px;
    right: -66px;
    width: 86px;
    height: 82px;
    background-color: #F1F2F3;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    border-style: solid;
    border-width: 14px 16px 28px;

    -moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 …

我有一个SVG,其中一些元素根据媒体查询旋转,如下所示:

@media (max-width: 480px) {
    rect {
        transform: rotate(10deg);
    }
}

元素旋转得很好,但(至少在Chrome中)它拒绝返回.这是为什么？其他指令,例如填充,在两个方向上都有效.

JSFiddle:http://jsfiddle.net/MM3VC/1/

变换后容器的DOM宽度与变换前相同？

为什么？

var theScale = aNumber;
var containerWidth = theContainer.width();
alert(containerWidth);

// and the other prefixes, as well
theContainer.css("-webkit-transform", "scale(" + theScale + ")");

containerWidth = theContainer.width();
alert(containerWidth);   // the same value ???

当我发现过滤器压平变换时,我正在尝试CSS变换,就像transform-style: flat.

var toggleFilter = function() {
  var div = document.getElementById("cube")
  if (div.className == "cube") {
    div.className = "cube filter"
  } else {
    div.className = "cube"
  }
}

* {
  transform-style: preserve-3d
}
div.cube {
  height: 100px;
  width: 100px;
  background: blue;
  transform: rotateX(45deg) rotateZ(45deg);
  border: solid 2px black;
  box-sizing: border-box;
}
div.face1 {
  content: "";
  height: 100px;
  width: 100px;
  background: green;
  transform: rotateY(90deg) translateZ(50px) translateX(50px);
  border: solid 2px black;
  box-sizing: border-box;
}
div.face2 {
  content: "";
  height: 100px; …

我有这个简单的代码片段,带有四个带有CSS缩放变换的按钮:

.social-buttons {
  height: 90px;
  margin: auto;
  font-size: 0;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.social-button {
  display: inline-block;
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px;
  margin: 0 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  opacity: .99;
  border-radius: 28%;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
  content: '';
  background-color: #000;
  width: 120%;
  height: …

目标:在Firefox中运行的转换元素中创建固定的背景位置.

我已经在这个页面上尝试了所有解决方案(以及其他一些解决方案),但没有一个有效: 固定附件背景图像闪烁/在与css转换结合时消失在chrome中

我尝试过的东西是静态位置,背面可见性设置,z-index设置,其他背景附件.

演示:

https://jsfiddle.net/96u9xqbn/6/

.fixed1 {
   transform: translateZ(0);
}

如果你删除上面的转换,它的工作原理.但是,如果您正在使用Skrollr之类的东西,或者还有其他需要进行转换,那么在Firefox中没有正确修复背景.

我试图通过X从上到下旋转位置来创建一个出现悬停的div ,我还想为它的旋转添加一些逼真的(DIV从底部的宽度应始终为100%,但应逐渐增加从20%到100%白色它旋转).

.img-event-parent{
	position: relative;
}
.img-event-details{
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	left: 0px;
	right: 0px;
	top: 0px;
	height: 100%;
	transform: rotateX(90deg);
	transform-style: preserve-3d;
    -webkit-transform: rotateX(90deg);
	transform-origin: bottom;
    transition: all 3s;
}
.img-event-parent:hover .img-event-details{
	transform: rotateX(0deg);	
}

<div class="img-event">
    <div class="img-event-parent img-parent">
      <a href="#">
      <img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
    </a>
    <div class="img-event-details">
      <a href="#" class="slick-desc"><?=$key->post_title?></a>
    </div>
  </div>
</div>

上面的片段旋转img-event-detailsdiv,但我不知道如何在旋转时从顶部仅调整div宽度(如上图所示).

我正在尝试创建此效果：

我需要将三种颜色设置为3种不同的div：

<div>
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
</div>

3个div需要完全填充其父级。它的父级可以是另一个div，甚至可以是整个窗口的大小。这是我尝试过的轮换，但没有完全填满空间。

<div>
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
</div>

#green {
  height: 100%;
  background-color: green;
  width: 37.5%;
  transform: rotate(45deg)
}

#red {
  height: 100%;
  background-color: red;
  width: 25%;
  transform: rotate(45deg)
}

#blue {
  height: 100vh;
  background-color: blue;
  width: 37.5%;
  transform: rotate(45deg)
}