标签: css-transforms
Chrome错误 - 与css转换结合使用时,边框半径不会剪切内容
我的问题是,在CSS转换期间,border-radius如果重叠元素的转换涉及,则暂时停止剪切元素transform.在我的情况下,我有两个divs绝对定位在另一个之上,其中第一个具有由单击第二个内部导航元素的操作触发的转换,如:
<div id="below"></div>
<div id="above"><div id="nav"></div></div>
在上述 div具有border-radius: 50%和剪辑的资产净值 div.在CSS中它就像(最小的例子,原始onclick动作说明:hover):
#below {
position: absolute; width: 250px; height: 250px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#below:hover {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#above {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
overflow: hidden;
}
#nav {
width: 40px;
height: 200px;
background-color: rgba(0,0,0,0.3);
}
当然,在http://jsfiddle.net/UhAVG/中可以更好地看到它,并带有一些额外的样式以便更好地说明.这在IE10 +和FF25中也可以正常工作,在Chrome 31和32中也可以禁用硬件加速.结果,只有加速的Chrome才会显示此不良行为.所以我想知道是否有可能使用当前的CSS3技术以某种方式解决它.
推荐指数
解决办法
查看次数
转换CSS属性不适用于<a>元素
我点击它时想要scale(x,y)我的<a>元素,但它不起作用.我使用Mozilla Firefox Web浏览器来运行该程序.
这是我的代码:
scaleElement.html
<html>
<head>
<title>CSS3 Transform and Transition</title>
<style>
a{
background-color: green;
color: white;
padding: 10px 20px;
text-decoration: none;
border: 2px solid #85ADFF;
border-radius: 30px 10px;
transition: 2s;
}
a:hover{
transform: scale(2,2);
}
</style>
</head>
<body>
<center><a href="xyz.html">click here</a></center>
</body>
</html>
推荐指数
解决办法
查看次数
在CSS中为3d平面上的子元素设置正确的透视图
我有一个倾斜45度角的SVG六角网格.在各个六角形上,我想放置图像(由红色矩形表示),这些图像看起来是直立的,分别对应于网格平面.图像/矩形不一定必须达到90度,但是我最难让它们拥有与飞机有点不同的任何视角.
有没有办法取消子元素的透视图或以某种方式重新编写CSS变换以使其看起来正确？
码
.display {
animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards;
-webkit-animation: displayFlicker 100ms cubic-bezier(.37, 0, .41, 1.74) 100ms 1 normal forwards;
background: #000;
display: block;
border-left: 0.25rem solid #000;
border-right: 0.25rem solid #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 480px;
overflow: hidden;
width: 1096px;
}
#hexGrid {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
height: 100%;
-webkit-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6);
-moz-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6);
-ms-transform: perspective(44vw) rotateX(45deg) scale3d(1.6, 1.6, 1.6);
-o-transform: perspective(44vw) …推荐指数
解决办法
查看次数
使用CSS transform scale()放大元素而不进行裁剪,保持滚动
实例:https://jsfiddle.net/b8vLg0ny/
可以使用CSS scale和translate函数来放大元素.
以这个例子为例,在2x2网格中有4个方框.
HTML:
<div id="container">
<div id="zoom-container">
<div class="box red">A</div>
<div class="box blue">B</div>
<div class="box green">C</div>
<div class="box black">D</div>
</div>
</div>
CSS:
* { margin: 0; }
body, html { height: 100%; }
#container {
height: 100%;
width: 50%;
margin: 0 auto;
}
#zoom-container {
height: 100%;
width: 100%;
transition: all 0.2s ease-in-out;
}
.box {
float: left;
width: 50%;
height: 50%;
color: white;
text-align: center;
display: block;
}
.red { background: …推荐指数
解决办法
查看次数
如何在 CSS“过山车”动画中弯曲一条线？
我正在尝试使用 CSS 创建过山车风格的动画。
我想知道如何在循环阶段弯曲“过山车”。
我正在寻找一个全 CSS 解决方案，但如果需要一点 JavaScript，我可以接受。
到目前为止我的代码：
#container {
width: 200px;
height: 300px;
margin-top: 50px;
position: relative;
animation: 10s infinite loop;
animation-timing-function: linear;
}
#coaster {
width: 100px;
height: 10px;
background: lightblue;
position: absolute;
bottom: 0;
left: 1px;
right: 1px;
margin: 0 auto;
}
@keyframes loop {
from {
margin-left: -200px;
}
30% {
margin-left: calc(50% - 75px);
transform: rotate(0deg);
}
60% {
margin-left: calc(50% - 125px);
transform: rotate(-360deg);
}
to {
transform: rotate(-360deg);
margin-left: 100%;
}
} …推荐指数
解决办法
查看次数
100%高度块与垂直文本
我有一个可变高度的块,我想在其中放置另一个具有100%高度和垂直文本(从下到上方向)的块,并将其堆叠到外部块的左侧.有没有办法用CSS转换来实现它,但在JS中没有宽度和高度计算？
这是我到目前为止所能得到的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.block1 {
border: 4px solid #888;
height: 120px;
width: 200px;
}
.block2 {
height: 100%;
border: 4px solid red;
}
.msg {
display: inline-block;
white-space: nowrap;
font-family: Verdana;
font-size: 14pt;
-moz-transform: rotate(-90deg);
-moz-transform-origin: center center;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: center center;
-ms-transform: rotate(-90deg);
-ms-transform-origin: center center;
}
</style>
</head>
<body>
<div class="block1">
<table class="block2">
<tr>
<td>
<div class="msg">Hi there!</div>
</td>
</tr>
</table>
</div>
</body>
</html>
您可以看到内部块的计算宽度与旋转前的文本宽度相同. …
推荐指数
解决办法
查看次数
transform:translateX vs left属性的转换.哪个有更好的表现？CSS
我正在制作一个带有HTML和CSS3的幻灯片菜单 - 尤其是过渡.
我想知道什么是最佳实践/最佳性能水平滑动相对定位的div.当我点击一个按钮时,它会向我的div添加一个类.哪个班级更好？(注意我可以稍后添加所有浏览器前缀,此网站仅针对现代浏览器).
//option 1
.animate{
-webkit-transition:all ease 0.3s;
-webkit-transform:translateZ(200px);
}
//option 2
.animate{
-webkit-transition:all ease 0.3s;
left:200px;
}
谢谢
推荐指数
解决办法
查看次数
溢出:隐藏不能正向翻译
我最近遇到了一件奇怪的事overflow: hidden;.我将它设置为一个元素,然后我想要转换它中的元素translate(),当它在负方向上转换时它将被隐藏,但如果我在正方向上转换,它将不会被隐藏.在桌面浏览器中,它并没有真正显示,但你可以通过一些鼠标工作来实现它.在移动设备上它只是滚动,所以这是最糟糕的.
这是一个显示它的示例:http://cssizer.com/KLHlPShW
推荐指数
解决办法
查看次数
接近CSS变换规模的极限
对于我的项目areallybigpage.com(*),我试图看看我们能用CSS做多远transform: scale(...).
这适用于正常大小的文本:
#id1 { position: absolute; transform-origin: 0 0; transform: scale(10000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.0001);}<div id="id2"><div id="id1">Bonjour</div></div> 但这似乎太多了,不再显示任何东西(测试Firefox 32.0/Win7,笔记本电脑/少数硬件加速):
#id1 { position: absolute; transform-origin: 0 0; transform: scale(100000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.00001);}<div id="id2"><div id="id1">Bonjour</div></div> CSS3的规模是否有限制transform: scale(...)？
我们如何进一步推动这一限制？
(*):由于此问题中描述的限制,我目前不在此页面上使用 transform: scale(...),但我想在本网站的未来版本中使用它.
偏离主题:如果你缩放得足够远PgUp,你很容易陷入1.79e+308浮动限制问题.(但这是另一个问题)
推荐指数
解决办法
查看次数
Chrome CSS错误:旋转元素中的"translate3d"不遵循"overflow:hidden"
看看这个CodePen,看看我的意思:
.perspective-container {
margin: 50px 0;
perspective: 1000px;
perspective-origin: 0 50%;
}
.card {
border: 10px solid blue;
width: 300px;
height: 300px;
overflow: hidden;
transform: rotateY(-45deg);
}
.card-inner {
width: 300px;
height: 300px;
overflow: hidden;
}
.scroller {
transform: translate(0, -100px);
}
.scroller-3d {
transform: translate3d(0, -100px, 0);
}
.will-change {
will-change: transform;
}<h1>Incorrect (uses will-change):</h1>
<div class="perspective-container">
<div class="card"><div class="card-inner">
<div class="scroll-container">
<div class="scroller will-change">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div></div>
</div>
<h1>Incorrect (uses translate3d):</h1>
<div …推荐指数
解决办法
查看次数
标签 统计
css-transforms ×10
css ×9
css3 ×6
html ×4
3d ×1
hidden ×1
javascript ×1
overflow ×1
svg ×1
transform ×1
will-change ×1