css-transforms相关内容
如何将图像放入div中,并且此div以45度旋转? 推荐答案 在img的转换样式中添加scale值,如下所示: 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .profile-photo { width: 210px; height: 210px; position: relative; left: 43px; top: 50px; bo
..
当悬停在li元素上时,我希望它的边框颜色和子图标一样变换。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .list-group-item-card { transition: border-left-color 0.5s ease; transition: all 0.5s ease; border-left: 10p
..
您好,我只想转换我的css转换,不想转换其他任何内容。很难通过文本解释,因此请查看我的以下代码: HTML:
..
我有一个灵活的布局,它显示一条长的蓝色线条,然后在后面显示文本。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“假”数据-巴贝尔=“假”>
There's no
..
第一次使用透视和转换Z,我在使用Safari时遇到了一点问题。 我正在使用代码为我正在构建的站点创建一个简单的视差效果,它在Firefox和Chrome中可以正常工作,但在Safari中不能正常工作。Safari似乎在应用透视属性的容器的底部添加了填充,这在其他提到的浏览器上是不会发生的。 我查看了Safari的调试工具,以查看是否在不应该添加的位置添加了任何填充或页边距,但似乎并非如
..
我有一些元素
使用旋转变换样式 -webkit-transform: rotateX(-1100deg); 有没有办法从计算的样式中获得准确的(-1100)旋转角度? window.getComputedStyle返回矩阵3d。 var element = document.getElementById('eleme
..
我有以下内容 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> setTimeout(function(){ var sections = document.querySelectorAll('section'), main = document.querySelector('.grid-container'), //section = secti
..
在下面的示例中,当您单击div时,它将旋转和倾斜,但在此过渡期间,该位置似乎向右移动了几个像素。 有没有办法迫使它在过渡期间保持在左侧?我一直在玩原创游戏,但一直不能做到恰到好处: $('div.book').click(function() { $(this).toggleClass('open'); }); div.bg { background-color: #0
..
这是我的css: #sort_dropdown:hover > .arrow{ -webkit-transform: translate(0,-42px); -moz-transform: translate(0,-42px); -o-transform: translate(0,-42px); transform: translate(0,-42px);
..
我使用css翻译在屏幕上放置了一个DIV元素。这可以很好地工作,只是在以后移位相同元素时,会丢弃原始移位。 使用Java脚本设置css开始位置 div.style.transform ="translate(800px, 400px)"; 在使用javascrip随机设置开始位置后,css动画只是将其重置回来。 CSS动画 @keyframes testanimatio
..
如何阻止每个字母在底部悬停时出现毛刺?发生这种情况是因为字母改变了位置,所以它正在快速切换其过渡,但如何更好地编码,以便过渡将是平滑的?https://codepen.io/anon/pen/XBmPMV 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> #text { cursor: pointer; font-size: 7em; fon
..
我正在开发一个游戏,我想让一些方框具有动画效果。 我希望长方体从小开始,然后向外增长,所有边缘同时增长,效果看起来就像是从中心向外增长。 到目前为止,我得到的最好的动画是:它根据我的需要增加长方体的高度和宽度,但从左侧和顶部开始。我希望它从中心点开始。 我查看了W3上的动画属性,但似乎没有适合的属性。 .box_2_gen{ animation-dur
..
我最近在overflow: hidden;中遇到了一件奇怪的事情。我把它设置为一个元素,然后我想用translate()转换其中的元素,当它向负方向平移时,它将被隐藏,但如果我向正方向平移,它将不会被隐藏。在桌面浏览器中,它不会真正显示出来,但你只需一点鼠标工作就可以到达它。而在手机上,它只是卷轴,所以这是最糟糕的。 这里有一个展示它的例子:http://cssizer.com/KLHlPS
..
我想做一个长方形的钻石。我已经用正方形做过了: 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .box { width:100px; height:100px; background:orange; z-index:1; position:relative; } .box:before { positi
..
我希望在X和Y方向按相同的绝对像素量(而不是相同的比例)缩放元素,以便 newWidth = oldWidth + n newHeight = oldHeight + n 其中n是增大的像素数,oldWidth和oldHeight是未知的。 有没有办法在纯CSS中做到这一点? css 如果维度未知,则无法使用推荐答案。在这种情况下,只有JavaScript可以做到这一点
..
我正在尝试制作一个使用css动画的图片库,但出现了一些奇怪的效果。我有一个较小的缩略图开始,我希望它缩放到两倍大小时,我悬停在它上面。这部分可以,但它也会使它向左移动,最终会越过屏幕的边缘。我应该做些什么来修复它? 数据-lang=“js”数据-隐藏=“假”数据-控制台=“假”数据-巴贝尔=“假”> .zoom { transition:1s ease-in-out; } .zoo
..
我有超文本标记语言
..
我正在使用css变换比例在div上创建平滑的缩放。问题是,即使在放大时,我也希望能够获得相对于div的正确鼠标位置,但我似乎可以找到正确的算法来获得这些数据。我正在从以下位置检索当前比例因子: var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform); sca
..
这应该非常简单。 我的HTML中有一堆锚,如下所示: Link 1 Link 2 Link 3 Link 4 Link 5 在CSS中,我放置了悬停效果以执行translate: transform(); a {
..
所以我只是个初学者,我只是想弄明白动画和它们是如何工作的。 我的计划是将球在一条线上无限地移动多少度(比方说90度)。以下是我想知道的几个问题: 有没有更好的方法来使用规则相同且略有不同(具有不同轮换)的类? 如何才能使球在不同旋转的新线上移动? .line, .line-deg90 { background-color: hsl(0, 0%, 0%); height:
..