标签: css-transforms
推荐指数
解决办法
查看次数
在应用 CSS 变换时影响其他元素：缩放
我在一个页面上有三个 div，并排浮动。使用 css scale 方法，我将最中间的 div 缩放到 0.5。这很好用。
唯一的问题是缩放 div 不会影响其他 div 的位置。似乎缩放后的 div 仍然有一个带有原始比例的隐形容器。期望的结果是缩放后，边距保持不变。
我添加了一个示例：http : //jsfiddle.net/yxYdd/3/（实际上，最中间的 div 充满了许多其他元素）
有没有一种巧妙的方法，不会弄乱边距等，以便缩放会影响其他 div 的定位？
推荐指数
解决办法
查看次数
平滑的 CSS 变换动画
我正在考虑优化 CSS 动画以提高性能。
从我可以找到的使用
.item { transform: translate(-25px,-50px)
效率比
.item { left: -25px; top: -50px }
我已经设置了一个小动画，可以移动和旋转一个框.balloon，作为动画的多个步骤。问题是动画变得非常生涩，即使为每一步声明了定位和旋转
这是我的标准 CSS
@keyframes balloon {
0%,100% { left:809px; top:50px; transform: rotate(0deg) }
10% { transform: rotate(-9deg) }
25%,75% { top:25px }
50% { left:235px;top:75px }
45% { transform: rotate(3deg) }
75% { transform: rotate(12deg) }
}
这是我优化的 CSS，这是生涩动画生效的地方
@keyframes balloon {
0% { transform: translate(0,0) rotate(0deg) }
10% { transform: translate(-57.5px,-10px) rotate(-9deg) }
25% { transform: translate(-143.75px,-25px) rotate(-4deg) }
45% { …推荐指数
解决办法
查看次数
CSS 3动画.translate3d与矩阵
我一直在做需要平滑过渡和动画的项目.我们最近几乎100%的时间都从使用Javascript迁移到CSS动画.
我发现使用translate3d可以在移动设备和桌面设备上提供非常流畅的动画效果.
我目前的动画风格是这样的:
CSS:
.animation-up{
transform: translate3d(0, -100%, 0);
}
.animation-down{
transform: translate3d(0, 100%, 0);
}
.animation-left{
tranform: translate3d(-100%, 0, 0);
}
.animation-right{
tranform: translate3d(-100%, 0, 0);
}
最近,我开始研究不同的框架,这些框架似乎得到了很多关注.两个特定的GreenSock(http://greensock.com/tweenmax)和Famo.us(http://famo.us).两者都显示出令人敬畏的帧率和惊人的性能.
我注意到他们正在使用马蒂克斯变换.
Greensock示例(使用矩阵):
<div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"></div>
Famo.us示例(使用3D矩阵):
<div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"></div>
我的问题是...... translate3d和matrix有什么区别？使用matrix而不是translate3D是否有巨大的改进？是否有另一种方法可以产生更好的结果？
我对translate3D很满意,但是想学习任何方法都能提供最流畅的动画,并寻找可能的指导.
推荐指数
解决办法
查看次数
CSS从汉堡包图标转换为交叉到箭头
我试图使用CSS变换从三线汉堡菜单中设置一个图标,以交叉到右箭头.第一次改造工作顺利,但我被困在第二次:横向箭头.
这是一个小提琴:
https://jsfiddle.net/v0fgvdg2/25
以及SCSS的相关风格:
.threebar {
cursor: pointer;
margin-top: 33px;
margin-left: 33px;
.bar {
width: 70px;
height: 22px;
background: #000;
margin-bottom: 11px;
transition: all 0.5s ease;
&:nth-child(1) {
transform-origin: 50%;
}
&:nth-child(2) {
transform-origin: 50%;
}
}
&.cross {
.bar:nth-child(1) {
transform: translateY(75%) rotate(45deg);
}
.bar:nth-child(2) {
transform: translateY(-75%) rotate(-45deg);
}
.bar:nth-child(3) {
opacity: 0;
}
}
&.arrow {
.bar:nth-child(1) {
background: red;
transform: scaleX(0.5) translateY(50%) rotate(45deg);
}
.bar:nth-child(2) {
background: blue;
transform: scaleX(0.5) translateY(50%) rotate(-45deg);
}
.bar:nth-child(3) {
opacity: …推荐指数
解决办法
查看次数
CSS中的变换缩放/旋转效果不应该影响孩子
我的结构如下:
html {
background-color: rgba(0, 0, 0, 0.75);
}
.container {
margin: 10% auto;
text-align: center;
}
div > span {
display: inline-block;
}
.horizontal {
display: inline-block;
position: relative;
top: .1em;
width: 15%;
}
.bubble {
display: inline-block;
padding: 0.5em;
background: url(http://imgh.us/Service_bubble.svg) no-repeat;
background-size: contain;
transition: all 0.3s ease-in-out;
}
.bubble:hover {
transform: scale(2) rotate(-90deg);
}<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="bubble">
<span class="fa fa-inverse fa-google fa-lg"></span>
</div> …推荐指数
解决办法
查看次数
使用带有变换旋转的 CSS3 attr()
我希望能够通过属性在 CSS 中旋转，即
<my-object data-angle="225"></my-object>
到目前为止我拥有的 CSS 是
transform:rotate(attr(data-angle)deg);
但这会引发错误，正确的语法是什么？
推荐指数
解决办法
查看次数
带有旋转文本的Flexbox
我正在尝试使用flexbox创建一个CSS小部件组件.
该组件有一个标题(应该有旋转的文本)和一个内容区域.
标题和内容都应填充父容器的高度,标题应为15px宽度,然后内容将拉伸以填充余数.
到目前为止,我得到的内容100%工作,但由于某种原因,标题没有填充父容器的高度.
到目前为止我有这个:
.widget {
height: 200px;
width: 200px;
border: 1px solid #ddd;
background-color: #eee;
display: flex;
}
.widget-header {
background-color: #1976D2;
color: #fff;
transform: rotate(-90deg);
border: 1px solid red;
font-size: 10px;
flex: 0;
height: 15px;
align-self: center;
text-align: center;
}
.widget-content {
border: 1px solid blue;
flex: 1;
}<div class="widget">
<div class="widget-header">order summary</div>
<div class="widget-content">
<p>some text here</p>
<p>some more text ...</p>
</div>
</div>CodePen:http://codepen.io/go4cas/pen/XpryQR
推荐指数
解决办法
查看次数
我可以使用 CSS 来扭曲边框，使它们看起来像草图吗？
我有带边框的框 ( div)，我想让它看起来像草图，即边框不是画成直线，而是稍微扭曲，就像手绘一样。
插图：
这可以使用 CSS 转换或类似方法来完成吗？
推荐指数
解决办法
查看次数
为什么scale CSS 变换函数不影响margin？
我有一个包含其他几个 div 和元素的 div。
现在我想用 transform: scale(n)
但是当我使用它时，一切看起来都很好，除了内部div的边距保持相同的大小但是内部元素的宽度发生了变化
正如您所看到的，div 的大小减少了一半......但边距是相同的：/
例如代码，您在父级中有一个 div。这个子 div 的边距为 100px
如果我更改父级的比例，子级的边距保持不变，但大小不变。您可以看到孩子在改变比例时没有移动。
.holder {
background: pink;
transform: scale(0.5);
}
#son {
margin-top: 100px;
padding: 20px;
background: green;
}<div class="holder">
<div id="son">
dontcare
</div>
</div>推荐指数
解决办法
查看次数
标签 统计
css-transforms ×10
css ×9
css3 ×5
html ×2
scale ×2
css-shapes ×1
flexbox ×1
html5 ×1
margin ×1
translate3d ×1