标签: css-transforms
在CSS透视图上使用单位
只是一个简单的问题,以澄清我对CSS单位的一些困惑perspective.
在CSS Transforms规范中,它引用了它,px例如perspective: 1000px;但我已经使用过,并且在许多其他地方,其他地方也没有使用它,px例如perspective: 1000;在W3Schools上.
这两种方式更受欢迎吗？有关系吗？
只是想清楚这一点,谢谢.
推荐指数
解决办法
查看次数
如何通过转换子元素来重新创建透视原点效果？
因此,在使用IE 故障和不兼容性后,我终于得到了正确尺寸的长方体(更新: 这是一个例子).动画需要单独为所有边设置动画而不是单个父元素,但这似乎是让它在IE中工作的唯一方法.
使用单个长方体可以很好地工作,但是多个长方体是有问题的,因为透视应用于单个变换元素(这对于在IE中工作是必要的)它们看起来都是相同的,无论它们在舞台上的位置如何:
如果透视将应用于舞台,消失点将位于其中心,导致子对象相应地转换,这就是我正在尝试重新创建(同时保持IE兼容性!):
不幸的是,将单位元素应用于透视原点似乎不起作用,所以我想知道是否有人有任何其他想法如何实现这种效果？
jsfiddle示例的代码
透视单一元素:
<!doctype html>
<html>
<head>
<style>
.stage {
width: 800px;
height: 800px;
background: #f6f6f6;
}
.wrapper, .top, .front{
position: absolute;
width: 200px;
height: 200px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.wrapper:nth-child(1) {
z-index: 4;
}
.wrapper:nth-child(2) {
left: 200px;
z-index: 3;
}
.wrapper:nth-child(3) {
left: 400px;
z-index: 2;
}
.wrapper:nth-child(4) {
left: 600px;
z-index: 1;
}
.top {
background-color: #00ff00;
-webkit-transform-origin: 50% 50% -100px;
-moz-transform-origin: …推荐指数
解决办法
查看次数
div向两个方向倾斜
是否可以DIV在CSS中创建以下形状.
浏览器支持并不重要.
推荐指数
解决办法
查看次数
CSS3 rotate3d pr rotateX获取元素的实际高度
我希望在x轴上旋转3d时获得元素的实际高度.我将尝试用以下图形解释:
元素的正常高度:200px
当旋转45度,100px时实际高度为118px:
当旋转45度,1000px时,实际高度为138px:
用于计算此高度值的正常公式(无需):
x = h * sin(angle)
这个公式的高度必须为142px.但它与这个价值不同.可能透视改变高度.但我没有找到任何用于计算这个高度的公式.
有谁有想法吗？
推荐指数
解决办法
查看次数
如何在悬停时使SVG更大？
如何在悬停时使每个SVG部分变大.我试图复制这个交互式地图的方式:http://goo.gl/orvyYI
我在这里创建了一个基本的交互式地图来测试:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px"
height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
.st0{fill:#C1C1C0;}
.st1{fill:#0FB5CB;}
.st2{fill:#46B649;}
</style>
<g id="Layer_1">
<polygon class="st0" points="76.6,96.1 745.6,96.1 745.6,543.7 188.3,543.7 "/>
</g>
<g id="landmarks-test">
<rect id="1" x="495.2" y="130.6" class="section" width="233.1" height="83.4"/>
<rect id="2" x="495.2" y="235.4" class="section" width="233.1" height="95.9"/>
<rect id="3" x="495.2" y="345.8" class="section" width="233.1" height="84.1"/> …推荐指数
解决办法
查看次数
居中缩放溢出的文本
在我的html/css应用程序中,我有一个按钮的概念,实质上是.button具有一堆适当属性的类.这是一个简化的例子:
.button {
width: 120px;
height: 30px;
line-height: 30px;
background: yellow;
text-align: center;
}<div class="button">
<div class="button-text">
Button text
</div>
</div>在少数地方,需要显示的文本相当长,但仍需要完全适合.由于font-stretch财产不支持,我使用transform: scale,它做我需要的 - 有点...除了上述,我有:
.button {
width: 120px;
height: 30px;
line-height: 30px;
background: yellow;
text-align: center;
}
.button-text {
line-height: 30px;
transform: scale(0.7, 1);
white-space: nowrap;
}<div class="button">
<div class="button-text">
Very long button text
</div>
</div>文本现在适合,但它不居中,因为在应用变换之前计算div中居中内容的位置 - 请参阅此jsfiddle中的示例:https://jsfiddle.net/1xz1g634/1/
我可以通过对其应用负左边距来"制造"它.button-text,但是这是一个黑客,并且在不同的浏览器中边距必须不同.
我怎样才能普遍地将该文本作为中心？理想情况下,不使用javascript,但是,如果其他一切都失败了,我可以使用javascript/jquery.
推荐指数
解决办法
查看次数
为什么我有这些白色边框与铬有一些分辨率以及如何删除它们？
我正在玩CSS旋转以在CSS中获得万花筒效果.
一切看起来都不错,除了Chrome以某种分辨率(在IE10上没有问题,我没有测试FF)
我不知道为什么但是有时我在万花筒的中心有一些奇怪的白色边框,即使旋转值看起来一切都很好.我找不到任何解决方法......
你可以在这里测试一个工作演示:http://jsfiddle.net/Lvc0u55v/4519/
您可能需要从jsfiddle移动滑块以查看显示的白色边框.
我正在使用这种css:transform: rotate(151deg) matrix(-1, 0, 0, 1, 0, 0)带有背景图像.
你能帮我删除这些边界吗？
推荐指数
解决办法
查看次数
没有固定背景高度的纯CSS视差？
我试图在没有固定背景高度的情况下获得纯CSS视差效果.这已在一些 地方进行了描述,但它们有一个共同的约束条件,即背景层必须具有固定的已知高度.
由于某些动态内容,我希望在没有固定的,已知的背景高度的情况下使效果正常工作.
我的最小例子是:https://jsfiddle.net/yf8oyben/
#container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 1px;
overflow-x: hidden;
overflow-y: scroll;
}
.background {
transform: translateZ(-1px) scale(2);
width: 100%;
background: lightgreen;
height: 250px; /* Assumes bg height */
position: absolute; /* Assumes bg height */
top: calc(125px - 50vh); /* Assumes bg height */
}
.foreground {
background: rgba(0, 0, 255, 0.5);
width: 100%;
position: absolute; /* Assumes bg height */
top: 250px; /* …推荐指数
解决办法
查看次数
使用CSS缩放整个HTML元素
如何按特定百分比或特定最终大小缩放整个元素和所有子元素？
我有一个<table>，并且我正在使用JavaScript模拟象形文字以计算div的宽度+一个重复的背景标签。我只想拥有此逻辑的一个版本，因此扩展父表将解决此问题。
推荐指数
解决办法
查看次数
转换节点上的CSS边框
我有一个HTML节点,我在其上设置了一个非常胖的边框和一个通过CSS缩放和旋转的转换.出于某种原因,在转换之后,在边界外部,节点本身颜色的非常细小的附加边界出现在外面,好像节点的背景延伸到边界下方并且边界不是很大足以覆盖背景颜色.
.transform {
transform: scale(1, .7) rotate(45deg);
}
.container {
width: 100px;
height: 100px;
background-color: chocolate;
border: 20px solid white;
}<div class="container">proper white border</div>
<div class="container transform">slim orange border around actual white border</div>请注意,在顶部框中,由于其颜色设置为白色而设置边框并不明显,但在底部框中,白色边框由另一个框的颜色边框包围.
有什么东西可以防止这种情况发生吗？
推荐指数
解决办法
查看次数
标签 统计
css ×10
css-transforms ×10
css3 ×7
html ×4
perspective ×2
svg ×2
border ×1
css-shapes ×1
javascript ×1
parallax ×1
scale ×1