Tag: css3

用html的两面翻转div: 我在我正在建立的网站上有一个登录表单，而且我还有一个注册表单。当点击“注册”链接时，我想通过将div旋转到另一侧来添加一些奇特的动画。我希望登录表单位于正面，注册表单位于背面。我宁愿不使用javascript，但如果有必要，我会。谢谢你的任何答案！

如果CSS3过渡不存在，使用Modernizr和jQuery来动画: 如果不支持CSS3，有没有办法使用Modernizr和jQuery的组合来启用类似于转换的东西？我现在正在做的就是这样…… This div changes both width and height on hover CSS是 .hoverable { height: 100px; width: 2000px; transition: height .5s, width .5s; } .hoverable:hover { height: 200px; width: 100px; } 如果不支持CSS3转换，我现在只使用Modernizr来使div默认处于hover状态。如果不支持CSS3，有没有办法使用Modernizr来触发jQuery动画？如果不是jQuery，那么我也可以使用自定义动画，但我真的不知道如何做。

在给定特定宽度范围的情况下使用jquery更改类名（媒体查询）: 我有以下要修改的html：我想使用媒体查询，但我不想修改css，而是将类名从width8替换为width6。以下标准媒体查询通常无法实现此目的： @media only screen and (min-width: 1240px) and (max-width: 1484px) { } 我希望使用jquery删除类，并在窗口介于1240和1484px之间时添加一个类。你可以帮助我使用jquery替代媒体查询来修改内联类和id名称吗？这是我的jquery $(document).ready(function() { $(window).resize(function(){ var width = $(window).width(); if(width >= 1240 && width = 1485 && width = 1789 && width = 2238 && width <= 3000){ $('#info').removeClass('col7').addClass('col6'); } else{ $('#info').removeClass('col8').addClass('col9'); } }) .resize(); });

在IE中旋转文本，不会变得难看: 我想逆时针旋转文字90度。 Firefox和Chrome没问题，使用： -webkit-transform-origin: top left; -webkit-transform: rotate(-90deg); -moz-transform-origin: top left; -moz-transform: rotate(-90deg); 对于Internet Explorer，据我所知，它应该是这一行： filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); （另一种方法，写入模式，只能顺时针旋转文本90度）。但是，在IE中，旋转的文本看起来像一个严重缩放的图像（下面比较）。 Firefox / Chrome – vs – Internet Explorer：有没有办法让Internet Explorer以更优雅的方式旋转文本（可能是Javascript / jQuery）？我一直在谷歌搜索，但我只能找到更多参考这个方法…

使用CSS转换滚动时如何旋转图像？: 我不确定如何使用jQuery，但有一个CSS3属性：transform：rotate 它可以与jQuery一起使用？ transform:rotate; -ms-transform:rotate; -webkit-transform:rotate; 的jsfiddle

CSS3动画translate3d不起作用: 我一直在尝试使用jQuery animate和CSS3 animate，我也想测试2D / 3D翻译以查看哪个更好。有谁知道为什么我的CSS3 translate3d不起作用？我在桌面和移动设备上试过它。任何帮助赞赏的jsfiddle HTML transition translate translate3d jQ animate CSS .container {position:absolute; left:20px; width:80px; height:80px; padding:5px;} /* transition */ #container1 {top:20px; background:red; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear;} #container1.on {left:250px} /* It moves if from pos absolute of parent, […]

环形工艺旋转器，环周围有褪色梯度效应: 我想用CSS3或JavaScript创建一个环形的流程微调器，类似于Android中的加载进度微调器。旋转器应连续旋转并填充沿边缘渐变的纯色（即圆锥形渐变），如下图所示：我怎样才能做到这一点？

CSS3过渡到动态创建的元素: 我正在尝试使用CSS3过渡动画创建动态创建的html元素。我希望动画在元素创建之前启动。对于这些我创建一个类来设置元素的原始位置，然后我通过jquery css（）方法设置目标位置但它刚刚在目标位置上出现的新元素没有任何过渡。如果我使用0ms的setTimeout来设置它的新css值。有什么我做错了吗？或者是一种限制？我认为我不应该使用setTimeout解决方法。谢谢！更新：这是与jsfiddle.net上运行的代码的链接，供您进行实验。 http://jsfiddle.net/blackjid/s9zSH/ 更新我已经用答案中的解决方案更新了示例。 http://jsfiddle.net/s9zSH/52/ 这是一个完整的示例代码 //Bind click event to the button to duplicate the element $(“.duplicate”).live(“click”, function (e){ var $to = $(“#original .square”).clone() $(“body”).append($to); if($(e.target).hasClass(“timeout”)) //With setTimeout it work setTimeout(function() { $to.css(“left”, 200 + “px”); },0); else if($(e.target).hasClass(“notimeout”)) // These way it doesn’t […]

有没有办法在DIV内进行视差工作: 可能是完全吠叫错误的树，但你可以使用div background-image元素制作视差滚动图像吗？我想要发生的是我目前有一些带有文本效果翻转的图像的DIV但是我在背景图像中使用视差我想要将3D主题与所有网站图像保持一致。编辑：例如，是否可以在此页面上制作蓝色框： www.parkhallmanor.co.uk/new 使用视差效果滚动单独的图像？

向下滚动时如何构建浮动菜单栏: 当我向下滚动网站显示时，顶部的黑色菜单栏看起来像浮动条。但我认为这涉及到jquery。我试过CSS，但似乎不像我想要的那样为我工作 #menucontainer { position:fixed; top:0; height: 250px } #firstElement { margin-top: 250px } 这是我想要菜单的网站基本概念： http://avathemes.com/WP/Hexic/