- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试模拟从介词 div 的右下角旋转的 n
个盒子。
所以,基本上,我希望 n
的左上角绝对位置与 n - 1
的右下角绝对位置相同。我真的希望我解释得足够好,我只是不希望有间隙,并且希望盒子从左上角旋转而不是向右或向下移动。
我尝试添加 transform-origin: 0 0;
但它仍然不起作用。
非常感谢您的帮助,在此先感谢您。
这是 CSS:
.con {
margin: 50px;
width: 100px;
clear: both;
position: relative;
}
.box:nth-child(5) {
width: 150px;
height: 150px;
outline: 1px solid black;
margin-left: -15px;
margin-top: -15px;
position: absolute;
transform-origin: 0 0;
transform: translate(140px, 140px) rotate(10deg);
}
.box:nth-child(4) {
width: 120px;
height: 120px;
outline: 1px solid black;
margin-left: 138px;
margin-top: 138px;
position: absolute;
transform-origin: 0 0;
transform: translate(110px, 110px) rotate(10deg);
}
.box:nth-child(3) {
width: 90px;
height: 90px;
outline: 1px solid black;
margin-left: 261px;
margin-top: 261px;
position: absolute;
transform-origin: 0 0;
transform: translate(80px, 80px) rotate(10deg);
}
.box:nth-child(2) {
width: 60px;
height: 60px;
outline: 1px solid black;
margin-left: 354px;
margin-top: 354px;
position: absolute;
transform-origin: 0 0;
transform: translate(50px, 50px) rotate(10deg);
}
.box:nth-child(1) {
width: 30px;
height: 30px;
outline: 1px solid black;
margin-left: 417px;
margin-top: 417px;
position: absolute;
transform-origin: 0 0;
transform: translate(20px, 20px) rotate(10deg);
}
和 HTML
<div class='con'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>
这是现在的样子:
这里是 codepen您可以在其中实时查看沙箱。
最佳答案
我想这就是您想要的。
查看代码链接。
http://codepen.io/anon/pen/bppRBx?editors=1111
.con {
margin: 50px;
width: 100px;
clear: both;
position: relative;
}
.box:nth-child(5) {
width: 150px;
height: 150px;
outline: 1px solid black;
margin-left: 0px;
margin-top: 0px;
position: absolute;
transform-origin: 0 0;
transform: rotate(0deg);
}
.box:nth-child(4) {
width: 120px;
height: 120px;
outline: 1px solid black;
margin-left: 149.99962px;
margin-top: 149.99962px;
position: absolute;
transform-origin: 0 0;
transform: rotate(-10deg);
}
.box:nth-child(3) {
width: 90px;
height: 90px;
outline: 1px solid black;
margin-left: 289.01398px;
margin-top: 247.33853px;
position: absolute;
transform-origin: 0 0;
transform: rotate(-20deg);
}
.box:nth-child(2) {
width: 60px;
height: 60px;
outline: 1px solid black;
margin-left: 404.36784px;
margin-top: 301.12891px;
position: absolute;
transform-origin: 0 0;
transform: rotate(-30deg);
}
.box:nth-child(1) {
width: 30px;
height: 30px;
outline: 1px solid black;
margin-left: 486.32916px;
margin-top: 323.09038px;
position: absolute;
transform-origin: 0 0;
transform: rotate(-40deg);
}
要计算每个新矩形的起点,您需要使用一些三 Angular 函数来计算最后一个矩形的终点位置。由于这不包含在 SASS/CSS 中,因此您必须编写自己的函数。Daniel Perez Alvarez 写了一篇关于如何在 SASS 中创建 COS/SIN 函数的简化版本的精彩博文: https://unindented.org/articles/trigonometry-in-sass/
关于html - 从左上角旋转一个 div,transform-origin 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35883372/
我正在尝试使用 Google map 的 iframe 在我的网站上列出来自 Google map 的所有仓库位置: 目前,我一直在研究如何删除位置框(左上角),因为我将其用作 iframe。有没有
我正在设计数据表的样式,但我不知道如何设计数据网格左上角的样式。就是这张图中的灰色区域: 你知道怎么做吗? 到目前为止,这是我的风格:
我正在尝试在导航栏的左上角添加一些文本。单击后,我希望页面自动滚动回页面顶部 HTML: LOGO HERE Services
默认情况下,SVG 中文本元素的 anchor 在左下角,但我希望它在左上角,因为我还创建了一个矩形作为文本的背景,但它显示不正确,因为文本高于矩形(因为矩形 anchor /偏移位于左上角)。有没有
我需要的是将 DIV 的内容溢出(如果这是正确的词,我不会溢出)到左侧和顶部,并保持 DIV 大小始终固定。这是我制作的图像: 正常结果是 DIV 变为 70x76(其内容的大小),但我需要保持 DI
我们如何在纯 CSS 中创建这个形状? 最佳答案 你可以像下面这样: html and the css div { height: 300px; background:
无法诊断 div 左上角 float 像素的原因。它只在我添加了一个 border-radius 后出现。 仔细观察每个 Angular ,您会看到一些碎片,因为它在应用半径之前应用了直线。也许需要一
有很多问题需要从左上角(例如:编辑距离)和从右下角开始(例如:回文子串)填表。有什么时候使用哪个的直观解释吗?引用资料: http://www.geeksforgeeks.org/dynamic-pr
我正在开发一个 FabricJS 应用程序,我希望用户通过简单的单击即可将对象移动到 Canvas 原点,即使在旋转或缩放对象或一组对象之后也是如此。为此,当用户单击时,我会执行以下代码: obj.l
我在定位元素时遇到错误。浏览器通过查看元素的左上角来计算元素的位置。 让我们说那个点(左上角)“基础”(抱歉这个术语)当我使用对齐或中心对象时,它工作正常。但是,如果我用其他属性更改元素的位置,比如说
是否可以禁用/删除对话框左上角的QDialogs默认关闭按钮? 最佳答案 至少在(嵌入式)Linux 中,您可以这样做: setWindowFlags(Qt::Window | Qt::WindowT
我如何让应用程序的名称出现在此处(就像普通应用程序一样)... alt text http://snapplr.com/snap/6sgc ...当应用程序是 LSUIElement 时。 我的问题是
我有一个 div,我想在 div 的右下角放一张图片,在左下角放一些图片。它们的高度不同,所以我想确保它们都与 div 的底部对齐。 首先,我使用以下方法使右下角对齐: position: ab
如何在使用 border-width 时添加边框半径?我想添加 border-top-left-radius 为 15px。 我有这段代码可以创建一个三 Angular 形对象,它看起来不错,但我希望
我是一名优秀的程序员,十分优秀!