标签: css-transforms

-moz-transform和-moz-transform-origin有什么区别？

这是一个包含段落的块元素.我们称之为*Block A*

我想在它上面添加一个箭头,我做了:

使用以下CSS:

.Block_A:before {
   content: '';
   position: absolute;
   top: 0; left: 50%;
   width: 1em; height: 1em;
   background: #0080FF;
   border-width: 1px 0 0 1px; border-style: solid; border-color: #0080FF;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

但是正如你所看到的那样,文章中的文章"死了"隐藏在小费背后.为了更好地查看和理解,我将红色的下半部分涂上了红色,这些部分显示在文章的文本上:

现在我如何保持尖端的上半部分为蓝色,但是让下半部分(又称红色部分)透明？像这样:

我试过用:

background: linear-gradient(to bottom, #0080ff 0%,rgba(255,255,255,0) 50%);

但它不像通常那样工作,因为尖端的形状不是正方形或矩形,因为我已经改变它(旋转45度).

我需要使用div元素创建一个CSS3梯形.为了清楚地说明我在做什么,我在下面创建了一个基本的视觉效果; 绿色是一个普通的矩形div,而红色代表我需要改变div的部分,以达到我需要的梯形形状.

如果我们正在编辑.trapezoid {}CSS类,那么实现形状需要什么规则？(显然颜色只是参考).

我img使用一些javascript切换一个类来为css 设置动画.此类将转换属性添加到img已经具有转换的转换.这样我就可以在3秒内将此图像从0px移动到10px.

http://codepen.io/poolboy/pen/swcup

img {
  transition: transform 3s ease-in-out;
}

img.trans {
  transform: translateX(10px) translateZ(0);
}

var myImg = document.getElementsByTagName('img');

setInterval(function(){
  myImg[0].classList.toggle('trans');  
}, 3000)

使用Chrome时,此动画很流畅,但图像变得模糊.使用Firefox,转换是逐个像素的(所以不是平滑的,我们可以看到过渡中的步骤)但图像不会变得模糊.

在这种情况下,图像有3个seconde移动到+ 10px,这意味着在1seconde动画时,图像应该距离其起始点3,33px的距离.Firefox似乎是这样的:"3,33px是不可能的,所以我将图像留在3px"(如果图像应该是3,51px,可能他将它移动到4px).Chrome似乎更像是这样:"3,33px是不可能的,所以我尝试重新渲染图像来制作它,但图像降级了"

不确定我的推理,但事实是,这两个动画都非常难看,有什么解决方案,在长时间内通过一点像素移动图像？是否可以在这两者之间进行相同的渲染？

我怎样才能让这两个一起工作？看起来他们正在阻止/打破彼此/或仅调用破坏transform3d

HTML结构

<div id="container">
    <div class="one" style="transform:translate3d(0,0,0)"></div>
    <div class="two"></div>
    <div class="one" style="transform:translate3d(0,200px,0)"></div>
    <div class="two"></div>
    <div class="one" style="transform:translate3d(100px,100px,0)"></div>
    <div class="two"></div>
</div>
<div class="div one"></div>

CSS样式

#container {
    -webkit-perspective:200px;
    -webkit-transform-style:preserve-3d;
    width:450px
}
.one {
    position:absolute;
    width:100px;
    height:100px;
    background-color:blue;
    -webkit-transition:1s ease all;
    border:1px solid black;
}
.two {
    -webkit-transform:translate3d(0, 100px, 0);
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
    -webkit-transition:1s ease all;
    border:1px solid black
}
.one:hover {
    -webkit-transform:scale3d(0, 0, 0);
}
.div.one {
    width:100px;
    height:100px;
    background-color:green;
   -webkit-transform:translate3d(0,400px,0);
}
.div.one:hover{
    -webkit-transform:scale3d(0,0,0);
}

小提琴= http://jsfiddle.net/q44ssh7g/1/

这应该很简单.

我的HTML中有一堆锚点,如下所示:

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>

在CSS中我放置了一个悬停效果来做一个 translate: transform();

a {
  font-size: 2em;
  transition: all .3s ease-out;
}

a:hover {
  transform: translate(0, -5px);
}

现在,当你将它们悬停时,这应该会使锚点向上移动5个像素.它们确实如此,但即使鼠标仍在徘徊,它们也会立即拍下来.其他人遇到这种行为,并找到了解决方案？我想效果保持活跃,而鼠标悬停.Codepen链接:http://codepen.io/BrianEmilius/pen/NqoLQo

我试图得到一个XI的图像,当它被盘旋时必须旋转180度,但它只是向上移动而不是旋转.

我做错了什么,这看起来不会旋转180度？

.black {
  background: #000;
  width: 100%;
  height: 400px;
}
.popup-close {
  position: absolute;
  top: 40px;
  right: 40px;
}
#x-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
}

<div class="black">
  <a class="popup-close" data-popup-close="popup-1" href="#">
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close">
  </a>
</div>

我在CSS中完成了这个.

添加后,它在Google Chrome中运行良好:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

但在FireFox中,它看起来像这样:

在这里查看来源

我尝试了几件事并搜索了很多.我不知道如何摆脱FireFox创造的边界.我找到的大多数东西都是关于过渡的,我没有使用过.任何想法都会非常受欢迎.

参考文献:
- CSS3变换旋转导致Chrome中的1px移位
- -webkit变换旋转 - Chrome中的像素化图像
- CSS过渡效果使图像模糊/移动图像1px,在Chrome中？

我有一个ul li a菜单,想要扭曲ul li但不是a.该ul li偏斜,但a不会歪斜到正常位置.

header ul li {
    display: inline-block;
    background: #f5c207;
    padding: 10px 20px;
    margin-left: 10px;
    transform: skew(-20deg);
}
header ul li a {
    transform: skew(20deg);
}

<div id="top" class="container">
    <ul>
        <li><a href="">About us</a></li>
        <li><a href="">Other</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</div>

我有一个<input type="range">想要旋转拇指 - 但只有拇指输入.

我的问题是:当我尝试旋转它时,它会旋转整个滑块.

有人能帮我吗？

function slide(event){
  event.target.style.webkitTransform = 'rotate(20deg)';
}

        .slidecontainer {
            width: 100%;
        }
        .slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 20px;
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
            border-radius: 20px;
        }
        .slider:hover {
            opacity: 1;
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background: grey;
            background-image: url(img/thumb.png);
            background-size: 35px 35px;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
        }
        .slider::-moz-range-thumb {
            width: 50px;
            height: 50px; …