标签: css-transforms
如何获得CSS3-3d转换元素的屏幕位置？
我有一个非常复杂的网站建立在CSS3上,它具有三维变换,旋转,翻转,翻转和一般扭曲的html元素.
我试图找出其中一个元素的屏幕位置,并没有看到任何方法这样做.我想知道是否有人有任何巧妙的想法.
或者,如果任何人都可以解释数学背后-webkit-perspective,我可以找出位置,因为这是我唯一不确定如何建模.
推荐指数
解决办法
查看次数
CSS3转换导致文本在Safari和Firefox Mac Yosemite中闪烁
我在Safari和Firefox(Mac/Yosemite)上遇到这个奇怪的问题,当鼠标悬停在转换元素上时,几乎所有文本都会闪烁.
示例gif :( Firefox,Yosemite)
.usp {
//USP has an icon that is defined below
opacity: .4;
@include transition(all .3s ease-in-out);
&:hover {
opacity: 1;
@include transition(all .3s ease-in-out);
.icon {
@include transform(scale(1.1));
@include transition(all 1.7s ease-in-out);
}
} // :hover
}
.usp .icon {
display: block;
height: 75px;
width: 75px;
// Insert background-image sprite (removed from this example)
@include transition(all .3s ease-in-out);
@include transform(scale(1.0));
}
我尝试过以下的事情:
将这些样式的每种可能组合添加到正文,转换元素和/或其父级
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-filter: opacity(.9999);
-webkit-font-smoothing: antialiased; …推荐指数
解决办法
查看次数
箭头按钮有垂直的梯度背景
我需要制作这个按钮:
通常当我需要使用渐变和边框制作箭头按钮时,我添加了.button:before具有绝对定位的元素,使用transform: rotate(-45deg) translate(%SOMETHING%);和添加background: linear-gradient(45deg, %COLORS%);.但现在我需要制作按钮,箭头角度不对.我该怎么做？
推荐指数
解决办法
查看次数
CSS转换过渡 - 使用'px'比'百分比'更平滑/更高效
我最近一直在研究改进我网站上的动画 - 更具体地说是移动设备上的导航下拉菜单.
在这方面,我偶然发现了以下案例,我希望能够获得更深入的知识.
情况是,在转换/动画时transform: translate3d(),似乎浏览器在使用%而不是使用时需要更多计算px.例如,在我的测试中,似乎从转换transform: translate3d(0, 500px, 0)到transform: translate3d(0,0,0)需要更少的计算并且运行比转换更平滑transform: translate3d(0, 100%, 0).
更新:经过进一步测试,我发现使用100vh/ 100vw绕过/减轻了使用百分比的问题.在元素具有窗口的已知百分比宽度或全宽的情况下,这可以是usefyk,从而改善性能.实际上,似乎使用此值的行为就像px在Chrome中分配了值一样.
这是每个动画的时间轴的几张图片.时间线是使用"性能"下的Google Dev工具获得的.为了更好地显示差异,Chrome开发工具的性能受限于"低端移动"(6倍CPU减速).
使用百分比变换:
使用像素(px)进行变换:
从图像中可以看出,在使用%而不是px确定转换时,似乎有更多的渲染和绘画正在进行.很有意义的是,浏览器必须计算每个帧的百分比值(我猜？),但与使用像素值相比,我感到惊讶的是它需要更多.
另请注意,图片中显示百分比时间轴的帧速率从未达到约60 fps,而是平均约为40 fps.
以下是复制案例的片段.有一个使用百分比,一个使用px.
$(document).on("click", function(){
$(".bb").toggleClass("active");
});.aa{
height:50px;
background:blue;
position:fixed;
top:0;
width:100%;
}
.bb{
position:fixed;
top:0px;
background:none;
height:100%;
width:100%;
left:0;
transform:translateZ(0);
overflow:hidden;
pointer-events:none;
}
.cc{
height:100%;
transform:translate3d(0,500px,0);
width:100%;
transition:transform .5s ease-in;
background:red;
}
.bb.active .cc{ …推荐指数
解决办法
查看次数
如果CSS转换2D可用,则使用JavaScript或jQuery进行检测
我在我的网站上显示一个元素,我用-90deg旋转但是如果浏览器不支持CSS变换,那么该元素看起来错位并且不是很好.现在我想用JavaScript或jQuery检测(如果jQ或JS是无关紧要的,因为我在我的网站上使用/加载了jQ)如果支持通过CSS进行这种旋转？
我知道Modernizr,但只是为了那个小东西,我不想包括整个库(并加快网站的速度加载).
推荐指数
解决办法
查看次数
CSS3中的极坐标变换？
将一条线转换为环是GIMP等图形程序中的一项简单任务:
过滤器⇒扭曲⇒极坐标http://adamhaskell.net/img/transform.png
我正在尝试研究是否可以在CSS中产生相同的效果.
所以我解决了以下问题:
- 上述算法映射
x到r和y至? - 要做到这一点,
x被缩放到的范围内[0,w/2],与w作为图像的宽度 - 此外,
y缩放到范围[0,2?] - 将极坐标转换回笛卡儿:
xc = rp*cos(?p)和yc = rp*sin(?p) - 然后翻译结果,使原点位于图像的中心.
- 所以我们有:
x' = (x/2)*cos(y/h*2?) + w/2;
y' = (x/2)*sin(y/h*2?) + h/2;
这一切都很好,但我怎么能在CSS中产生这样的变换呢？据推测,没有一个关键字是有用的,所以它必须是矩阵变换.好吧,我不知道如何从上面的两个方程构建矩阵,更不用说如何在CSS变换中表示它.
最后一步有人可以帮助我吗？
推荐指数
解决办法
查看次数
Modernizr与cssSandpaper？
我一直在努力尝试在IE 8,7和6上使用旋转(xdeg)功能,为此我谷歌一段时间找到了cssSandpaper但是因为我必须加载4个不同的脚本我想只做它如果它是必要的im使用modernizr我尝试这样的事情:
<head>
<link rel="stylesheet" href="stilos/estilo.css" />
<script src="scripts/modernizr.custom.19387.js"></script>
<script src="scripts/jquery-1.8.1.js"></script>
<script src="scripts/misfallbacks.js"></script>
</head>
<body>
<div id="acerca"><a href="#">Acerca de mi</a></div>
</body>
我的css文件(estilo.css):
#acerca{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
-sand-transform:rotate(90deg);
position: relative;
top: -233px;
left: 462px;
width: 123px;
height: 23px;
z-index:100;
}
我的js文件(misfallbacks.js)
Modernizr.load({
test:Modernizr.csstransforms,
nope:['transformie/EventHelpers.js/','transformie/cssQuery-p.js','transformie/sylvester.js','transformie/cssSandpaper.js']
);//Fin de monernizr on load
它在safari,chrome,opera,Firefox和IE9上运行得很好但是当我尝试IE8或IE7时,我在控制台上收到以下错误
SCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
我添加了一个console.log来试图找出发生了什么并在这里去了那一行它是(EvenHelpers.js):
me.addEvent = function(obj, …推荐指数
解决办法
查看次数
具有平移变换的CSS关键帧动画在IE 10和Firefox中捕捉到整个像素
在使用css关键帧动画中的translate 2d变换设置其位置动画时,IE 10和Firefox都会将元素捕捉到整个像素.
Chrome和Safari没有,当动画微妙的动作时看起来好多了.
动画按以下方式完成:
@keyframes bobbingAnim {
0% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
50% {
transform: translate(0px, 12px);
animation-timing-function:ease-in-out
}
100% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
}
这是我的意思的一个例子:
只需在Chrome和IE 10(或Firefox)中打开它,您就会注意到运动平滑度的差异.
我意识到可能有许多因素会影响这种行为,例如是否使用硬件加速来绘制元素.
有没有人知道一个修复程序试图强制浏览器总是在子像素上绘制元素？
我发现了类似的问题,但答案是使用translate转换动画,这正是我正在做的事情: CSS3 Transitions'snap to pixel'.
更新: 玩了一下之后我找到了Firefox的修复程序,虽然在IE 10中没有做任何事情.诀窍是稍微缩小元素并使用translate3d在Z轴上具有1px偏移:
@keyframes bobbingAnim {
0% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
50% {
transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
animation-timing-function:ease-in-out
}
100% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out …推荐指数
解决办法
查看次数
formular用于计算容器的宽度/高度(相对于父级),其中带有透视的父容器内的translateZ
translateZ使用set perspective(关键字:"parallax")相对于父级宽度/高度的父容器内部计算子元素的宽度/高度的公式是什么？
我想在两个轴上创建一个具有视差效果的站点.除了一件事,我能够弄清楚我的模型需要的一切.当它超过100%时,如何计算儿童的宽度/高度.由于父母的视角和儿童的翻译,儿童的宽度/高度在视觉上不再与父母的宽度/高度对齐.
用于缩放子元素的公式是:1 + (translateZ * -1) / perspective.但我无法找到宽度/高度的公式.顺便说一句:当孩子的宽度/高度<= 100%时,一切正常.
但是当宽度> = 100%时,请查看下图中的结果(容器具有顶部偏移以使事物可见).
为了正确,在我的特定情况下,方法是让所有子元素在视觉上具有相同的宽度/高度.
在SASS(首选):CSS中的PEN或SassMeister
:PEN
来自可能有用的规范的链接:
https://www.w3.org/TR/css-transforms-1/#recomposing-to-a-3d-matrix
https://www.w3.org/TR/css-变换-1 /#数学-描述
"谷歌搜索"很多,但没有找到任何指向我正确方向的东西.提前致谢...
html, body {
height: 100%;
overflow: hidden;
width: 100%;
}
#projection {
perspective: 1px;
perspective-origin: 0 0;
height: 100%;
overflow: auto;
width: 100%;
}
.pro {
transform: scale(1) translate(0px, 0px) translateZ(0px);
height: 100%;
position: absolute;
transform-origin: 0 0;
transform-style: preserve-3d;
width: 100%;
}
.pro--1 { …推荐指数
解决办法
查看次数
在bg重叠时将文本颜色变为黑色
我有一个div与背景颜色渐变绝对定位.我有这个文本,当我向上滚动文本时,我想要更改为白色.
我正在使用'mix-blend-mode'属性来实现此目的,但我找不到任何将文本从黑色变为白色的设置.有没有人以前做过这个或者能想到我能做的伎俩？
.bg-container {
position: fixed;
top: -30px;
left: 0;
width: 100px;
height: 100px;
}
.gradient-background {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
transform: skewY(-15deg);
}
.scroll-content {
position: absolute;
top: 50px;
}
.scroll-content p {
color: #000;
mix-blend-mode: overlay;
}
/*hack for iOS*/
.scroll-content p:after{
content: '\200c'
}<div class="bg-container">
<div class="gradient-background">
</div>
</div>
<div class="scroll-content">
<p> abc 1 </p>
<p> abc 2 </p> …推荐指数
解决办法
查看次数