Tag: css transforms

旋转或旋转hover的图像: 我想知道如何在旋转或旋转图像时进行旋转。我想知道如何在下面的代码中用CSS来模拟这个function： img { border-radius: 50%; } <img src="http://i.imgur.com/3DWAbmN.jpg" />

Chrome中的CSS3转换旋转造成1px的偏移: 我有一个css3转换旋转转换的问题。转换工作正常，但在完成元素移动一个像素之后。另一个奇怪的是，它只发生在页面居中（ margin:0 auto; ）。如果您还删除了转换，该错误仍然存在。你可以看到它发生在这里： http://jsfiddle.net/MfUMd/1/ HTML： <div class="wrap"> <img src="https://github.com/favicon.ico" class="target" alt="img"/> </div> <div class="wrap"> <div class="block"></div> </div> CSS： .wrap { margin:50px auto; width: 100px; } .block { width:30px; height:30px; background:black; } .target,.block { display:block; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; […]

通过代码旋转网页？: 我希望有一个相对简单的方法来旋转网页一点点，30度左右，同时仍然使其function齐全和可用。我完全控制了页面，并且可以修改它，以便在需要时使这更容易。不过，我宁愿不重写在SVG中的所有东西，但也许JavaScript和canvas将工作？有没有办法使用CSS，Javascript或其他一些跨浏览器的方法，让我做到这一点？

我如何创build纯CSS的三维球体？: tl; dr：我想用CSS创build一个实际的3d球体，而不仅仅是一个幻觉注意：一些片段示例没有响应。请使用全屏。使用纯CSS，您可以像这样创build和制作一个3D立方体的animation ： #cube-wrapper { position: absolute; left: 50%; top: 50%; perspective: 1500px; } .cube { position: relative; transform-style: preserve-3d; animation-name: rotate; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes rotate { 0% { transform: rotate3d(0, 0, 0, 0); } 100% { transform: rotate3d(0, 1, 0, 360deg); ; } } .face […]

jQuery拖放/调整CSS变换比例: 我正在应用CSS转换（和特定于浏览器的-webkit，-o等）：变换：matrix（0.5,0,0,0.5,0,0）; 到一个div，然后使用jQuery的draggable（）和resizable（）插件的孩子说的div。我遇到的问题是，当拖动或调整子元素的大小时，jQuery所做的更改与鼠标的“同步”超出了所应用的比例。我find了一个解决scheme在stackoverflow（虽然我愚蠢没有书签，现在不能find它….），build议修补插件，它工作奇妙。它沿着这条线： function monkeyPatch_mouseStart() { // don't really need this, but in case I did, I could store it and chain // var oldFn = $.ui.draggable.prototype._mouseStart ; $.ui.draggable.prototype._mouseStart = function(event) { var o = this.options; //Create and append the visible helper this.helper = this._createHelper(event); //Cache the helper size this._cacheHelperProportions(); //If ddmanager […]