标签: css-transforms
在修改宽度或高度时动态更新CSS3旋转元素的transform-origin
接下来从改变宽度/高度到CSS旋转div触发顶部/左侧重新定位我需要一些帮助来解决CSS旋转和动态宽度/高度.
我理解transform-origin并认为我需要在更新元素的宽度或高度的同时动态更新它.我只对技术解决方案感兴趣,而不是任何跨浏览器的聪明,因此演示只使用-webkit前缀.
HTML
<div id="wrap">
<div id="rotated">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
Width: <input id="width" type="range" min="20" max="400" step="1" value="200">
Height: <input id="height" type="range" min="20" max="400" step="1" value="100">
Angle: <input id="angle" type="range" min="0" max="360" step="1" value="0">
</div>
CSS
#rotated {
background:lightblue;
border:1px dotted #000;
height:100px;
width:200px;
position:absolute;
top:300px;
left:100px;
overflow:hidden;
}
#width, #height, #angle {
display:block;
margin-bottom:10px;
width:200px;
} …推荐指数
解决办法
查看次数
是否可以将div设置为梯形？
我知道有可能歪斜,但我没有办法在特定程度上扭曲每个角落.
这是我正在进行的项目:http://map.ucf.edu/
专门查看菜单中的选项卡.现在我正在使用图像,我想为有能力的浏览器改变它.
我知道可以创建一个CSS trapazoid,但这是使用没有内容的边框.最终结果还需要一些圆角.
编辑:从Zoltan Toth的解决方案开始,我能够实现这一目标:演示
div {
height: 20px;
padding:2px 5px 0 5px;
color:white;
background: rgba(0,0,0,.5);
margin: 0 10px;
position: relative;
border-top-left-radius: 6px 4px;
border-top-right-radius: 6px 4px;
font-family:sans-serif;
font-size:13px;
line-height:20px;
vertical-align:bottom;
display:inline-block;
white-space:nowrap;
}
div:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 19px solid rgba(0,0,0,.5);
border-left: 9px solid transparent;
position: absolute;
bottom: 0;
left: -9px;
}
div:after {
content: '';
line-height: 0;
font-size: 0;
width: …推荐指数
解决办法
查看次数
CSS3转型:多个起源？
是否可以在左上角指定原点(0%,0%)进行缩放,在CSS3中指定不同的原点(中心)进行旋转？我只使用webkit,如果有帮助的话.
我目前正在使用转换列表(即-webkit-transform:scale(newScale)rotate(newRotate)
但似乎不可能改变中间传球之间的原点.有没有更好的方法来看待这个？目前,如果我缩放一个对象并使用默认中心的原点旋转它,则元素的位置现在处于关闭状态,因此当您拖动元素时,光标仍然位于元素的左上角,而它应该是在中心.将原点更改为中心以缩放它可修复此问题,但会出现旋转和翻转的新问题.
推荐指数
解决办法
查看次数
webkit转换阻塞链接
我一直在使用变换和转换来创建没有Javascript的动画UI组件并且真正享受结果,但我遇到了一个令人不安的问题,似乎是webkit浏览器所独有的.
在我旋转的元素上,只能在元素的右边50%访问跨越元素宽度100%的锚点.
在Firefox中使用-moz-transform不存在此问题,但使用-webkit-transform在Chrome和Safari中都可以100%重现.
这是代码:
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px; …推荐指数
解决办法
查看次数
从样式表中的多个选择器堆叠CSS3变换函数
假设我有2个DIV:
?<div class="div1"></div>
<div class="div2"></div>??????????????????????????????
我想要旋转它们:
div {
position: absolute;
width: 100px;
height: 100px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
然后我想独立移动它们:
.div1 {
background-color: red;
-webkit-transform: translate(100px,0px);
-moz-transform: translate(100px,0px);
}
.div2 {
background-color: green;
-webkit-transform: translate(0px,100px);
-moz-transform: translate(0px,100px);
}?
问题是旋转和移动都使用transform属性,因此移动会覆盖旋转.是否有可能使值堆叠在一起而不是相互覆盖？
注意:
我将使用复杂的变换函数,而不仅仅是简单的翻译,所以我不能用just left和topproperties 替换它们.
我有很多 DIV,因此在分配各自的属性之前,选择所有这些DIV并应用它们的公共属性会更有效.
参考:jsFiddle
推荐指数
解决办法
查看次数
使用chrome/safari影响其他元素的CSS3转换
我有一个问题,我的css3转换正在影响页面上的其他元素,甚至导致它们闪烁.我看到另一篇关于此的帖子,但他们没有解决这个问题.
http://scosha.mybigcommerce.com/w107b/当您滚动浏览导航时,您会看到动画css3转换.它在firefox中工作正常,没有闪烁但是使用chrome和safari,效果非常明显,你可以在下拉菜单项和页脚文本中看到它.
推荐指数
解决办法
查看次数
SVG的免费转换插件 - 创建占位符元素
我正在尝试创建html5拼贴编辑器,您可以在其中编辑图像,类似于您在Word中看到的图像(裁剪图像而不是在拖动边缘时缩放图像,能够在自由变换区域内拖动/旋转/缩放图像(所以一种占位符功能)等).这意味着我们需要使用SVG和剪切/屏蔽,以及自由变换元素与那些掩码/剪辑的绑定位置.之后生成的整个SVG应该可以根据打印尺寸进行扩展(但这不是问题).
这个想法很简单 -
- 使用已经制作的jQuery Free Transform插件 - https://github.com/gthmb/jquery-free-transform
- 将它的控制区域转换绑定到SVG掩码
问题:即使转换后的SVG蒙版具有FT div的转换和位置的精确副本,当转换包含旋转时,它也会很奇怪.看起来像变换 - 原点不起作用,旋转和缩放以某种方式连接到左上角而不是中心,不知道为什么:/
这是一个小提琴,只是尝试旋转元素,你会看到问题是什么:
小提琴 (已经制作的svg的简化代码)
主要部分:
var refreshSVGMask = function(){
//get element transform
var elTransform = $('#ft').css("transform");
//quick parse of matrix transform:
var elMatrix = elTransform.substring(elTransform.indexOf("matrix") + 7, elTransform.indexOf(")"));
//modify matrix, to apply last two values (top and left position), which in jquery free transform are in "top" and "left" css attributes. Note - I've also tried applying same matrix, but changing "x" and "y" attributes in SVG (like: …推荐指数
解决办法
查看次数
Chrome:向后倾斜时文字模糊:歪斜(-10度) - >歪斜(10度)
我只想扭曲父母并将其歪斜在孩子身上.
示例:HTML
<div class="parent"> <!-- skew(-10deg) -->
<div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>
示例:CSS
.parent {
transform: skew(-10deg);
}
.child {
transform: skew(10deg);
}
使用Firefox,Safari,里面的文字似乎没问题.但Chrome和Opera并不是有点模糊
我必须使用-webkit-backface-visibility: hidden;Chrome中的缩小框像素化
Firefox:
Chrome:
Firefox与Chrome:
或通过Photoshop缩放
实例: http ://jsfiddle.net/1tpj1kka/
任何的想法 ？
注意 !!!:web-tiki的答案是另一种防止问题的解决方案.但如果有人回答了一个真正的解决方案来解决这个偏斜问题(真正的修复),我会接受答案.
推荐指数
解决办法
查看次数
平行四边形内的图像
我有多个图像需要像这样的平行四边形:
它们应该包含在div元素中,旋转木马中并链接到视频页面.但是,由于透明区域,使用常规图像会导致链接出现边界框问题.
使用哪个CSS属性将图像转换为平行四边形形状,如上例所示？
推荐指数
解决办法
查看次数
混合混合模式在html具有"透视"时被破坏
通过将"perspective"应用于html元素,我的mix-blend-mode似乎被Firefox忽略了.
html {
perspective: 800px; /* causing the issue */
}
div {
color: #fff;
background: linear-gradient(to bottom, #000, orange);
mix-blend-mode: screen;
}
有什么问题？我使用的是Firefox 40.
推荐指数
解决办法
查看次数
标签 统计
css-transforms ×10
css ×8
css3 ×8
css-shapes ×2
jquery ×2
svg ×2
webkit ×2
blending ×1
flicker ×1
javascript ×1
skew ×1
transform ×1