标签: css-transforms

我正在使用CSS3在div上执行以下转换:

'-webkit-transform' : 'rotateX(45deg) rotateZ(-45deg)'

结果如下:

或者像这个小提琴一样:http://jsfiddle.net/kteSW/

正如我们在这里看到的,角度是36度,而不是30度(sin45*sin45).有谁知道这个问题的原因？这是有意还是CSS3错误？

更新:

我已经将参数设置为:

-webkit-transform-style: preserve-3d; -webkit-perspective: none;

所以一切都应该以正交的方式呈现.但是,角度仍然不是30度.

我正在尝试旋转我应用了"页面卷曲"投影的div.

页面卷曲阴影效果工作正常,直到我旋转div,此时阴影元素显示通过div(z-index问题)？

我也注意到,如果我有一个图像作为div内容,我不会遇到这个问题,但我很乐意让它适用于带有文本内容的div.有什么建议？

这是代码:

CSS(删除供应商前缀以缩短代码,但问题出现在所有现代浏览器中):

.shadow {border:1px solid #ccc;position:relative;width:300px;height:116px;background-color:#ededed;}

.shadow:before, .shadow:after {            
    bottom:13px;
    content: "";
    position: absolute;
    z-index: -1;
    -moz-transform: rotate(-11deg);
    box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
    height: 50px;
    max-width: 50%;
    width: 50%;
    left:3px;
}
.shadow:after {
    -moz-transform: rotate(11deg);
    left: auto;
    right: 2px;
}

.rotate{
    -moz-transform: rotate(4deg);
}

HTML:

    <div class="shadow">this is the first div</div> <!-- this one is ok -->
    <div class="shadow rotate">this is the second div</div> <!-- this has the issue -->
    <div class="shadow rotate"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" …

目标是让子元素由其父元素旋转，但是一旦单击该子元素，它就会动画显示如果没有将旋转应用于父元素的情况。所以基本上我只是想把父元素的旋转移除。

WIN - rotateZ(ndeg) on the parent and rotateZ(-ndeg) on the child
FAIL - rotateXY(ndeg) on the parent and rotateXY(-ndeg) on the child

小提琴

这可能是任何人曾经问过的最简单的问题,但是今天早上我的脑子里一片空白.也许我需要更多咖啡.

基本上我正在尝试将一些CSS3变换效果添加到元素中,无论出于何种原因,Firefox都不会玩球.

如果你看看Chrome 中这个小提琴,你会看到我想要的东西,然后如果你在Firefox中看到它,你会发现它不一样......

这是该特定元素的CSS;

-webkit-transform: rotateY(60deg) scale(0.9);
-ms-transform: rotateY(60deg) scale(0.9);
transform: rotateY(60deg) scale(0.9);

我只是错过了一处房产吗？

我一直在使用cordova构建一个要求苛刻的混合应用程序,并注意到与我在移动Chrome中运行网站时相比,它通常很慢.我听过一些对我没有意义的论点:

1. 移动设备中的css动画很慢(如果这是真的,那么网站在移动设备上的运行速度也会很慢,这不是真的)

2. cordova建立在chrome之上(css变换应该与cordova无关,chrome应该能够很好地渲染它们)

cordova默认是否限制gpu chrome可以使用的数量？是否有一些我可以调整以改善css过渡性能的设置？

我有一个"可翻转"的模态对话,由两个div(正面和背面)组成:

<div class="modal-dialogue">
    <div class="modal-content">
        <div class="front">
             <h1>Front</h1>
        </div>
        <div class="back">
             <h1>Back</h1>
        </div>
    </div>
</div>

使用CSS转换我通过将"翻转"类添加到模态内容中来翻转模式以显示背面:

.modal-content.flipped {
    -webkit-transform: rotateY(180deg);
}

这一切都很好...... 除非我添加溢出:隐藏; 属性到模态内容.突然,后部div不可见,而前部div的背面变得可见(即使背面可见性设置为隐藏).

这看起来很奇怪.为什么设置overflow属性会以这种方式改变背面可见性？

你可以在这个小提琴中看到它:https://jsfiddle.net/amxp02mx/.它工作正常,但如果你在CSS中注释掉第31行,使溢出:隐藏,它就会被破坏.

有谁能解释为什么？

我一直在搜索和玩弄转换:css的rotate()几个小时,但未能得到我想要的结果.我检查这些链接1,2,3等等.

其他的标题我不能使它与其他单元格一起使用,当使用空格时,列的宽度会扩展:no-wrap,没有它,文本文件将一个接一个地垂直向上.下面的图片应该清楚地解释我打算做什么.

这就是我所拥有的:

		table {
			border: 1px solid #000;
			border-collapse: collapse;
		}

		table td {
			border: 1px solid #000;
		}

		.rotate {
			white-space:nowrap;
		    -webkit-transform: rotate(-90deg);
		    -webkit-transform-origin: 10px;
		    -moz-transform: rotate(-90deg);
		    -moz-transform-origin: 10px;
		    -ms-transform: rotate(-90deg);
		    -ms-transform-origin: 10px;
		    -o-transform: rotate(-90deg);
		    -o-transform-origin: 10px;
		    transform: rotate(-90deg);
		    transform-origin: 10px;
		}

  <table>
        <tr>
            <td colspan="2">HEADER</td>
            <td>HEADER</td>
        </tr>
        <tr>
            <td rowspan="4" class="rotate">QUITE LONG TEXT</td>
            <td rowspan="2" class="rotate">TEST 1</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
        <tr>
            <td rowspan="2" class="rotate">TEST 2</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td> …

在我的项目中,我有一个屏幕应该从屏幕的右侧放入,所以对于我已经使用过的东西transform: translateX(100%),然后将其更改为transform: translateX(0%).它工作正常我能够实现轻松的效果,但在那个屏幕我有动作按钮有css属性,Position: Fixed;Bottom: 0px;但这不工作我的意思是它不粘在屏幕的底部.

这是我的JSfiddle:https://jsfiddle.net/sureshpattu/a1seze4x/

HTML:

<header>
  Heading
</header>
<div class="page__popup page__popup--ease-in-right page__action-btn--visible" style="height: 382px;">
  <div class="container">
  </div>
  <button class="js-action-btn">
    SELECT ROOMS
  </button>
</div>

CSS:

header {
  background: #fff;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 2px 2px 10px #000;
}

.container {
  height: 382px;
}

.page__popup {
  position: absolute;
  top: 100vh;
  z-index: 8;
  display: block;
  overflow-y: scroll;
  max-height: 100vh;
  width: 100%;
  height: …

我必须在元素上应用倾斜和旋转.它工作正常但是偏斜的文本没有在它的容器中保持对齐(参见结果图像):

左边的文字溢出容器:H(来自"Hello")和T(来自"The")对齐不正确.

这就是我想要实现的目标:

.skew-parent-wrapper {
  width: 300px;
  margin-left: 100px;
  margin-top: 50px;
  border: 1px solid red;
  padding-bottom: 30px;
}

.skew-text {
  -moz-transform: rotate(-10deg) skew(-30deg, 0deg);
  -webkit-transform: rotate(-10deg) skew(-30deg, 0deg);
  -o-transform: rotate(-10deg) skew(-30deg, 0deg);
  -ms-transform: rotate(-10deg) skew(-30deg, 0deg);
  transform: rotate(-10deg) skew(-30deg, 0deg);
}

<div class="skew-parent-wrapper">
  <h1 class="skew-text">Hello Welcome to the skew text</h1>
</div>

我正在尝试使用CSS创建一个“透视模型”。关于如何在Photoshop中使用3D图层实现此功能的教程很多，但我想使用CSS来实现。这是我要实现的示例：

这是代码（使用原始图像https://i.imgur.com/foDEYpB.png）：

#perspective {
  width: 400px;
  height: 500px;
  position: absolute;
  background-image: url("https://i.imgur.com/foDEYpB.png");
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -250px;
  transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  box-shadow: -15px 15px 20px rgba(0, 0, 0, 0.5);
}

<div id='perspective'></div>

我已经很接近了，但是不确定如何提高图像看起来的“深度”或“高度”。所说的“深度”的放大版本，其中图像在侧面重复出现：

PS：如果有人知道我所说的“深度”的正确名称，我很想知道！