我想拆分背景图片.例如这样的原始图像

我想要这样的效果:

这是我的代码

<style>
    div{

    -webkit-transform: skewY(175deg); 
    padding: 10px;
    margin: 10px;
    border: 10px;
    background-image: url(Chrysanthemum.jpg);
    width: 200px;
    height: 200px;
    background-origin: content-box;
    }
</style>
<div></div> 

但我找不到任何方法如何使用CSS或jQuery以相同的厚度效果分割这个背景.

如何使用仅具有水平CSS的视差效果来引导站点？

要求

• CSS只有视差
• 父层必须具有宽度/高度== 100vw/100vh
• 子图层的宽度/高度必须> 100vw/100vh
• 子图层必须在视觉上与父图层宽度对齐100%
  • 到目前为止,子图层在技术上确实有100%的父级宽度,但由于perspective它们在视觉上看起来并没有占据父母宽度的100%
• 子层(第一个除外)必须相对于其父层具有顶部偏移量
• 结果必须基于计算才能具有最大的灵活性
• 必须跨浏览器固体(至少最新版本的专业)

到目前为止我做了什么

实际上这个问题是一个后续问题.
这是我在SASS或CSS中使用当前模型状态的PEN .

工作模拟示例(jQuery)

在JavaScript中,它很容易实现我正在寻找的东西.所以这是一个PEN模拟我想用CSS模仿的效果.

已知问题

我现在最关心的问题是,浏览器似乎以不同的方式呈现这种情况.查看浏览器窗口(chrome vs ff)的屏幕截图,滚动到下方的右下角.但我希望这可以避免.

那里有很多视差教程.为什么会有所不同？

实际上我研究了很多,但没有找到甚至一个描述如何实现水平视差(意味着子层的宽度> 100vw).当然,那里有水平视差滚动.但它们都有一个共同点:子层宽度总是<= 100vw - 这实际上就是差异.

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#projection {
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-perspective-origin: 0 0;
  perspective-origin: 0 0;
  height: 100%;
  overflow: auto;
  width: …

transform属性允许您旋转或翻转,但是如何同时执行这两个操作？假设我想将元素旋转90度并水平翻转？两者都使用相同的属性,因此后者会覆盖前者.为方便起见,这是一个示例小提琴:

http://jsfiddle.net/DtNh6/

transform: rotate(90deg);
transform: scaleX(-1);

当我们使用CSS3时transform: operation1(...) operation2(...),首先完成哪一个？

第一次操作似乎是最右边的操作.,即此处operation2已完成operation1.只是为了确定,这是真的吗？

注意:我在某些地方读过一件事,反之亦然(答案,互联网上的文章),这就是问题所在.

在rotate应用过滤器后获取div的位置时遇到问题.我有一个端点的位置,它的高度和它旋转的角度,但在检查了这个滤波器实际上对MDN的影响("[cos(角度)sin(角度)-sin(角度)cos(角度) 0 0]")我仍然不知道如何破解它.

示例:

我感兴趣的div是虚线.它的造型在那一刻是:

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

(top/ left描述它的开始位置).我试图让top/ left其最终的位置.

我有这样的蛋卷冰淇淋SVG图形,我想用一个改造瓢transform-origin的50% 100%(底部中心).Firefox声称服从(即检查员注意到正确transform-origin),但实际上是左上角的变换.奇怪的是,WebKit只有在父元素font-size:100%设置时才会服从.

这些是非常相似的问题,但仅适用于Firefox:

1. 在SVG组上设置transform-origin不在FireFox中工作

2. 如何在SVG中设置变换原点

3. Transform Origin无法在Firefox中运行

我有一个嵌套在标签中的内联元素(a <span>)<h1>.我将变换属性应用于h1(倾斜使其看起来像平行四边形).
我需要将span标记转换为"unskew"它及其文本.但这似乎只适用于IE.

以下是HTML和CSS 的示例:

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
}
h1 span {
  color: #fff;
  transform: skew(15deg);
}

<h1><span>This is a Title</span></h1>

我background-attachment:fixed的工作正常.但是当我在那个DIV上定义CSS3旋转并向下滚动然后background-attachment:fixed停止工作.

检查这个http://jsfiddle.net/P3jS4/

现在我正在研究chrome18.

当你删除旋转css然后后台附件:修复工作正常.

http://jsfiddle.net/P3jS4/2

我在背景图像上使用CSS3变换来悬停.

我已经在Opera,Safari和Firefox的最新浏览器中进行了测试,并且运行良好且流畅,但是在Chrome中,过渡非常不稳定.

Heres是链接,将鼠标悬停在社交图标上以查看我的意思.. http://www.media-flare.com/pins/ - 我注意到当您将浏览器调整为移动视图时,它会变得更糟.

我在这里做了一个jsfiddle版本,并且因为很难看到它而放慢了转换速度.

http://jsfiddle.net/wsgfz/1/ - 这在chrome和firefox中看起来很生涩,在safari和opera中很流畅.

我能做些什么来使过渡更顺畅吗？

如果你不能查看jsfiddle,这是代码

HTML

.social {
   position: relative;
   list-style:none;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.fbook, .twit, .tmblr, .pntrst, .insta {
   background: url(http://placehold.it/350x150) center center;
   width: 78px;
   height: 90px;
   background-size: cover;
   float: left;
   margin: 30px;
   -webkit-transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   transition: all 0.8s …

使用css3时transform(),position: fixed不适用.我做了一个完全工作的jsFiddle显示问题:http://jsfiddle.net/SR5ka/

首先向下滚动,注意左侧边栏保持固定.现在,单击expand,然后向下滚动,注意左侧边栏现在没有修复.

知道是否有本地css修复此问题？