标签: css-transforms

请查看演示 - http://jsfiddle.net/cYGzC/

我们的想法是,在悬停时,十字架('×')将围绕其中心转动,这将在悬停时产生良好的旋转运动.问题是,为了正常工作,×的中心和圆的中心必须重合.

.close_button {
    background-color: #3b3b3b;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(150,150,150,0.9);
    color: #fff;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    cursor: pointer;
}

除了Windows中的Chrome之外,上述CSS技巧似乎在许多浏览器中都能完成.(Mac Chrome似乎工作正常.)

我正在制作一个css 3d转换网络应用程序,我希望IE11能够得到支持.我知道IE10不支持css属性的preserve-3d值transform-style,但我不确定IE11.我已经阅读了一些说IE11应该支持它的东西,但我尝试的例子没有正常工作(这里的Windows 8.1上的IE11).那么,IE11是否完全支持css 3d转换和preserve-3d？

目标

我正在使用jQuery动画制作可折叠的侧边栏.我希望侧边栏上有垂直文本作为标签,可以交换animateOut/animateIn效果.

通常情况下,我会使用我只是垂直交换的文本图像,并在动画中将其切换出来,但是对于CSS3转换,我想让它工作.

问题

我面临的问题是,在旋转的容器上设置高度使其水平扩展(因为它旋转了90度),这样就不起作用了.然后我尝试设置宽度(希望它会垂直扩展,充当高度),但这会产生奇怪的效果,导致我父容器的宽度也会扩展.

固定？

如何在不影响父容器宽度的情况下在旋转(变换)元素上设置高度？到目前为止,我一直无法做到这一点.

实例

这是一个演示我的问题的小提琴:小提琴

这个collapse-pane类是我旋转的,包含我的文本里面的范围.您会注意到它有一个宽度设置,它会扩大边框,但也会影响父容器.

代码:

CSS:

.right-panel{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    border:1px solid #ccc;
    background-color:#efefef;
}
.collapse-pane{
    margin-top:50px;
    width:30px;
    border:1px solid #999;
    cursor:pointer;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);   
}
.collapse-pane span{
    padding:5px;
}

HTML

<div class="right-panel">
    <div class="collapse-pane">
        <span class="expand">Expand</span>
    </div>
    <div style="width:0;" class="panel-body">
        <div style="display:none;" class="panel-body-inner">
            adsfasdfasdf …

我遇到了固定定位,css转换容器和Safari的麻烦.当我在模态中单击项目时,我正在尝试显示下拉列表.模态有一个css transform.为了确保下拉列表始终显示在模态上,我将其定位为固定(我使用JS 计算left和top值).

它在Chrome,Firefox和Opera中的效果与预期相同,但Safari显示出一种奇怪的行为.根据W3C:

对于变换,除了none之外的任何计算值都会导致创建堆叠上下文和包含块.该对象充当固定定位后代的包含块.

因此,CSS转换容器中的固定元素应相对于此容器而不是视口定位.但似乎Safari并不像这样.看这个例子:

$(document).ready(function() {
  $(".show-liste").click(function() {
    $(".liste").show();
  });
});

.modale {
  height: 50px;
  overflow-y: scroll;
  transform: translate(100px);
}

ul {
  position: fixed;
  left: 0px;
  top: 0px;
}



/* --- Purely style related stuff ---- */

body {
  font-size: 80%;
}
.modale {
  position: absolute;
  top: 50px;
  padding: 60px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 2px #ddd;
}
button {
  width: 200px;
}
ul {
  list-style-type: none; …

我想用CSS3转换创建一个自举翻转卡.我确实从这个工作和基本的例子开始

但是我想修改它以获得固定高度卡和一些小的增强功能.特别是当用户点击我在右上角创建的图标时,我需要翻转卡片.

我已经修改了代码,你可以在这里看到.

问题是在正确翻转到背面后卡不会翻转到前面.

有人可以建议任何解决方案吗？

注意: 问题似乎与jquery代码有关.其实我有

$('div.flipControl').on('click', function () {
    $(this).closest('div[class="card"]').toggleClass('flipped');
});

但如果我改变它

$('div.flipControl').on('click', function () {
    $(this).parent().parent().parent().toggleClass('flipped');
});

一切都按预期工作.

我创建了一个形状,表示一个阴影朝向底部变大的页面.

body {
  background: #dddddd;
}
div {
  background: white;
  margin: 40px auto;
  height: 300px;
  width: 300px;
  position: relative;
  padding: 10px;
}
div:before,
div:after {
  height: 96%;
  z-index: -10;
  position: absolute;
  content: "";
  left: 8px;
  top: 2%;
  width: 30%;
  max-width: 300px;
  background: transparent;
  box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(1.5deg);
}
div:after {
  transform: rotate(-1.5deg);
  right: 8px;
  left: auto;
  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}

<div></div>

我需要将其旋转,但是当我尝试添加时transform: rotate(10deg),box-shadow幻觉会被破坏并且会在父图层上移动.

body { …

所以基本的想法是在弯曲的桌子上1-9个座位,就像你通过第一人称视角看它们一样.我试图获得一些div元素,这些元素将在另一个div具有边界半径的元素的外部流动,使其成为半长圆形.我发现了一些示例,其中一个元素被动画化,以弧形流过容器,但我需要div/seat是静态的.我正在寻找可以引导我走上正确道路的任何想法或例子.

我只在Safari上有一个奇怪的问题(奇怪的是？LOL).如果您使用的是iPhone,iPad或桌面Mac,则无关紧要; Safari使用动画关键帧和变换进行错误的计算定位徽标.

问题是徽标需要移动到他的房间,但在safari上徽标也向左移动,当关键帧达到100%时,徽标完全适合他的房间.

你可以看到奇怪的效果:https://amonarraiz.com(访问Safari不同于访问另一个浏览器,代码是相同的).

这是我的代码:

.intro-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.intro-logo {
  background: url(https://amonarraiz.com/css/img/slider/2.png) center center no-repeat;
  background-size: cover;
  width: 50rem;
  height: 41rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-86%, -52%);
  -webkit-transform: translate(-86%, -52%);
  transform: translate(-86%, -52%);
  opacity: 0;
  cursor: pointer;
}

.intro-in {
  -moz-animation-duration: 3.75s;
  -webkit-animation-duration: 3.75s;
  animation-duration: 3.75s;
  -moz-animation-name: intro-in;
  -webkit-animation-name: intro-in;
  animation-name: intro-in;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1; …

我正在尝试制作气球飞行的动画。在所有现代浏览器中，IE11都是如此。

我正在使用translateX和translateY没问题，但是缩放导致图像变得模糊。

@media (min-width: 1100px) {
	.balloon-outer,
	.balloon-inner,
	.balloon {
		height: 100%;
		position: absolute;
		width: 100%;
		bottom: 0;
		right: 0;
		animation-duration: 60s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-direction: normal;
		will-change: transform;
		pointer-events: none;
	}
	.balloon-outer {overflow-y: hidden;
		transform-origin: 50% 50%;
		animation-name: travel-x;
		animation-timing-function: ease-in;
		transform: translateX(-20%);
	}
	.balloon {
		transform-origin: 50% 50%;
		animation-name: travel-y;
		animation-timing-function: ease-out;
		transform: translateY(90%);
	}
	.balloon-inner {background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100% / auto 40%;
		transform-origin: 100% 100%;
		animation-name: scale;
		animation-timing-function: linear;
		transform: scale(3);
	}
}

	@keyframes scale …

我正在尝试使用伪元素创建三角形.像下图中的那个.

但这就是我得到的.

这是我迄今为止尝试过的.

.container .form--container:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 130px;
    width: 28px;
    height: 28px;
    transform: translate(-1rem, -100%);
    border-left: 1.5rem solid #979797;
    border-right: 1.5rem solid #979797;
    border-bottom: 1.5rem solid white;
}