用于文本旋转的CSS3变换
我有一个关于CSS3转换属性的问题(用于文本旋转)基于我对以下内容的使用;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
似乎箱子模型有所变化,即顶部/右侧/底部/左侧的计算方式不同.宽度/高度和浮子似乎也受到影响.
以下面的示例图片为例;
你能用简单的语言解释一下吗？
- 旋转文本(如上图所示的90度)对顶部/右侧/底部/左侧填充/边距等的确切影响是什么？
- 假如我们有2个浮动元素.一个具有上述旋转文本和其他div以及其他一些内容,如下所示;
我想了解如何让第二个div(右侧面板)完全在第一个div(旋转文本)之后开始？
<div class="fl text-transform-class">My Classes</div>
<div class="fl">Right Panel</div>
谢谢.
如果我没有弄错的话,元素是正常流动的一部分,或者浮动,好像它们没有被转换.一旦建立了他们的位置,就进行转换或转换.转换或转换不会对文档流或任何浮动产生任何影响.
顶部,左侧,右侧或底部的哪一侧会受到转换的影响.因此,如果在示例中将边框应用于旋转div的顶部,则边框将显示在左侧.
编辑:
为了帮助你更好地理解它,我创建了一个类似于你的样本,但我添加了填充,边距和顶部和底部边框,希望能说明什么是什么.我还添加了背景颜色和边框,以清楚地看到块元素的大小以及它们如何旋转.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.fl {
border-top: solid 2px #ff0000;
border-bottom: solid 2px #00ff00;
float: left;
color: #ffffff;
padding: 10px 30px;
}
.left {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
background-color: #808080;
height: 50px;
width: 300px;
margin-left: -360px;
}
.right {
background: #404040;
height: 300px;
width: 300px;
margin-top: 18px;
margin-left:74px;
}
span {
display: block;
width: 100%;
height: 100%;
background-color: #A0A0A0;
}
</style>
</head>
<body>
<div class="fl left"><span>Rotated text</span></div>
<div class="fl right"><span>Other content</span></div>
</body>
</html>
重要的是要记住,在应用转换之前,所有内容都已布局.
我想这个例子中最有趣的部分是如何应用边距以便将两个div彼此对齐并将它们对齐到页面的左侧.如果没有应用边距和变换,左侧div将浮动到页面的左侧,右侧div将浮动.
如果我们只是添加转换(没有边距),div将旋转-90度(右上角为原点)并最终位于右侧div的顶部.与此同时,它也会在左侧div最初定位的左侧留下一个大的白色间隙.请记住,转换不会影响浮动.
为了使两个元素在视觉上与页面的左侧对齐,我们必须应用边距.为了将左侧div放到左侧,我们必须在左侧应用负边距.这可能会令人困惑,但请记住在转换之前应用保证金.所以为了让div出现在我们想要的变换之后,我们首先必须在变换之前将它移动-360像素(= 300宽度+ 30左边填充+ 30填充右边)到左边,这样它在-90度旋转后恰好出现在0像素处.
右侧div浮动在左侧div上.因此它有效地定位在x位置360.因为我们将左侧div移动到左边,负边距为-360像素,现在它将以像素0结束.因此它与转换后的左侧div位于相同的位置.为了在视觉上将其对齐到左侧div的右侧,我们必须对其应用正余量.多少？另一个可能令人困惑的部分是我们必须根据旋转的左div来计算它,因为我们必须在视觉上将它与旋转的左div对齐.所以它是50(高度=旋转div的宽度)+10(顶部填充)+10(底部填充)+ 2 x 2(2 x顶部/底部边框)= 74像素.
我在18像素的右边顶部添加了另一个边距,以便在视觉上对齐跨度的内容区域.希望这一切都有助于理解所有填充,边距,位置和浮动总是在转换前计算.
| 归档时间： |
|
| 查看次数： |
7219 次 |
| 最近记录： |