我在一个页面上有三个 div，并排浮动。使用 css scale 方法，我将最中间的 div 缩放到 0.5。这很好用。
唯一的问题是缩放 div 不会影响其他 div 的位置。似乎缩放后的 div 仍然有一个带有原始比例的隐形容器。期望的结果是缩放后，边距保持不变。
我添加了一个示例：http : //jsfiddle.net/yxYdd/3/（实际上，最中间的 div 充满了许多其他元素）
有没有一种巧妙的方法，不会弄乱边距等，以便缩放会影响其他 div 的定位？
我一直在做需要平滑过渡和动画的项目.我们最近几乎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很满意,但是想学习任何方法都能提供最流畅的动画,并寻找可能的指导.
我有以下mixin用于跨浏览器转换:
.transform (...) {
-webkit-transform: @arguments; /* Chrome, Opera 15+, Safari 3.1+ */
-moz-transform: @arguments; /* Firefox 3.5+ */
-ms-transform: @arguments; /* IE 9 */
-o-transform: @arguments; /* Opera 10.5+ */
transform: @arguments; /* Firefox 16+, IE 10+, Opera */
}
.translate(@x:0, @y:0) {
.transform(translate(@x, @y));
}
并应用如下所示的内容:
#main {
.translate(280px, 0);
}
但它不是IE8和Opera mini中的 wotk .是否有一些后备,polyfill或任何支持它的浏览器？
我试图使用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: …我的结构如下:
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> …我希望能够通过属性在 CSS 中旋转，即
<my-object data-angle="225"></my-object>
到目前为止我拥有的 CSS 是
transform:rotate(attr(data-angle)deg);
但这会引发错误，正确的语法是什么？
我正在尝试使用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
我有一个3d框的网格,只有两个面(正面和底面).每个盒子都有自己的视角.悬停时,框旋转; 底面朝向前方.例如:
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 1000px;
margin: 50px auto;
}
.box-wrapper {
width: 25%;
height: 250px;
perspective: 1000px;
}
.box {
width: 100%;
height: 100%;
position: relative;
transition: transform .5s;
transform-style: preserve-3d;
}
.box .face {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.box .face.front {
transform: translateZ(123.5px);
background-color: hsla(0, 100%, 50%, .5);
}
.box .face.bottom {
transform: rotateX(-90deg) translateZ(123.5px); …尝试在父 SVG 中定位电池指示器。SVG<svg viewBox="0 0 24 24">元素具有电池路径和显示百分比的文本元素。它通过几个 css 转换和文本属性进行定位。在 chrome 中打开时，文本位置正确/firefox 但在 safari 中是分支。
<text
text-anchor="middle"
dominant-baseline="middle"
style="transform:translate(50%,98%) scale(.2);
font:700 13px sans-serif;fill:#deba78"
>24.2%</text>
css-transforms ×10
css ×8
css3 ×7
html ×2
css-shapes ×1
flexbox ×1
html5 ×1
javascript ×1
less ×1
safari ×1
scale ×1
svg ×1
transform ×1
translate3d ×1