标签: css-transforms

请问有没有办法如何结合更多的CSS3变换？例如,当我设置这个

$bgWrapper.css({
 '-webkit-transform' : ' scale3d(' + currScale + ', '+ currScale +', 1)'
});

然后片刻之后

$bgWrapper.css({
'-webkit-transform' : 'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

我遇到了问题.第一个变换用第二个变换覆盖,但这就是我绝对不希望发生的事情.所以我观察到我可以组合这些值,所以我可以暂时存储旧值并执行此操作

var tmpTransform = $bgWrapper.css('-webkit-transform');
$bgWrapper.css({
'-webkit-transform' : ''+ tmpTransform +'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

但即便这样也不正确,重复通话也存在问题.

那么有没有办法如何获得css3规模与javascript的精确值？有没有办法如何通过js获得CSS3翻译的确切值？目前我只获得具有这些值的矩阵,当然我可以解析它,但我希望有更好的解决方案.

最后..我想--webkit-transform:matrix(...)在iPad上不是硬件加速,所以唯一的方法是matrix3d？正确地组合所有这些转换没有问题..

非常感谢,希望你理解我的问题:)

我的例子是一个使用CSS3转换和转换的旋转动画多维数据集.

问题是,在这个jsfiddle的起始位置似乎没有可能的CSS3旋转来显示'4'面(左旋一个).

JSFiddle的基本指令: 'x'键使用CSS3设置立方体样式rotateX:90deg,'y'表示rotateY,'z'表示rotateZ.单击"重置"按钮返回起始位置.注意*无论旋转(x,y或z),我都不能让立方体向左旋转一个位置.

我正在使用CSS3 rotate3d属性rotateX,rotateY并rotateZ使用transition影响该transform属性的CSS3 .

此外,值得一提的是,使用rotateX/Y/Z属性允许立方体在几乎所有其他位置/方向上向上,向左,向右或向下旋转.

问题:

这里有什么问题？这种轮换不可能吗？CSS3旋转有问题,还是我的代码/逻辑中存在问题？

最佳答案将解释CSS3 rotate3d转换如何工作(幕后;数学上).

我一直在研究一个带有网格元素的库页面的原型,我希望在悬停这些元素时加入一些3D样式.

我正在研究以下文章中使用的技术:

• http://tympanus.net/Development/3DBookShowcase/
• http://tympanus.net/Development/AnimatedBooks/index.html
• http://css3.bradshawenterprises.com/transforms/

我现在的原型部分实现了我想要实现的目标:http://jsfiddle.net/fmpeyton/8cs35/(注意:我现在只在Chrome中测试原型)

.resources{
    -webkit-perspective: 1000px;
}
.resource{
    /* -webkit-perspective: 800px; */
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 10px;
    transition: all .5s;
    height: 259px;
    -webkit-transform-style: preserve-3d;
}
.resource img{
    width: 200px;
    -webkit-transform: translate3d(0,0,20px);
}
.resource:hover{
    -webkit-transform: rotate3d(0, 1, 0, 40deg);
}

.resource .title{
    background: #999;
    display: block;
    position: absolute;
    height: 259px;
    -webkit-transform: rotate3d(0,1,0,-90deg);
    width: 40px;
    left: -20px;

}
.resource .title p{
    font-size: 15px;
    line-height: 40px;
    padding-right: 10px;
    text-align: right;
    width: …

我想像http://desandro.github.io/3dtransforms/examples/card-01.html那样翻转

但每边都有按钮.所以这是我的HTML

<div class="flip-container">
    <div class="flip">
        <div class="side front">
            <p>front</p>
            <button class="front-flip-button">flip</button>
        </div>
        <div class="side back">
            <p>back</p>
            <button class="back-flip-button">flip</button>
        </div>
    </div>
</div>

和css

.flip-container{
    position: relative;
    -webkit-perspective: 800;
    width: 500px;
    height: 300px;
}
.flip{
    position: absolute;
    width: inherit;
    height: inherit;
    -webkit-transform-style: preserve-3d;
    -webkit-transition-duration: 500ms;
    -webkit-transform: translate3d(0, 0, 0);
    border: 1px solid;
}
.side{
    position: absolute;
    width: inherit;
    height: inherit;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}
.flip.flipped,
.back{
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
}
.back-flip-button,
.front-flip-button{
    position: absolute; …

如果你去http://jsbin.com/dibobapaluti/1/edit,你会看到链接在1秒后因css转换而改变.

如果您在IE11中打开该链接,您会注意到如果您非常快速地悬停链接,则会跳过1s过渡并且链接会立即更改其颜色和背景颜色.

如果您在Google Chrome中执行相同操作,则无法看到该问题,无论您将鼠标悬停在链接上的速度有多快,都会应用1s转换规则.

你知道这是不是一个bug？

a {
    display:block;
    width:130px;
    border:1px solid black;
    background-color:#617ACC;
    color:white;
    padding:3px;
    text-decoration:none;
}
#main-nav {
    padding-left:0;
}
li {
    margin-top:11px;
    list-style:none;
}
a:hover {
    background-color:red;
    color:black;
    width:200px;
    transition-duration:1s;
}
a:link:hover {
    font-size:18px;
}
a:visited {
    color:black;
}

<p>test</p>
<ul id="main-nav">
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ..." target=_blank>About me</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">My adventures</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Want to travel …

div使用CSS3单击菜单时如何翻转多个？

这段代码仅适用于最后两个div：

HTML代码

<ul class="nav">
   <li><a href="#home">home</a></li>
   <li><a href="#about">about</a></li>
   <li><a href="#work">work</a></li>
   <li><a href="#contact">contact</a></li>
</ul>
<section class="container">
   <div id="card">
      <div class="front flipper" id="home">home</div>
      <div class="back flipper" id="about">about</div>
      <div class="front flipper" id="work">work</div>
      <div class="back flipper" id="contact">contact</div>
   </div>
</section>

CSS代码

    .container {
    width: 500px;
    height: 360px;
    position: relative;
    margin: 0 auto 40px;
    border: 1px solid #CCC;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
#card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s; …

是否有一种方法,最好不使用JS,使容器在下面的代码片段中包装缩放的,更通用的,转换后的子元素,即纯红外边框完全包含虚线蓝色边框？

顺便说一下,这似乎是一个浏览器错误,因为它违反了默认的盒子模型行为,父母的大小会自动调整为适合孩子.

#container {
  border: 1px solid red;
}

#scaled {
  border: 1px dashed blue;
  transform: scale(3, 3);
  transform-origin: 0 0;
}

<div id="container">
  container
  <div id="scaled">
    scaled 3x
  </div>
</div>

我正在练习html并遇到问题。
首先，我的代码：

i:hover{
  transform: rotate(360deg);
  transition: 1s all;
}
i{
  transition: 1s all;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<i class="fa fa-car">This is a car.</i>
</body>
</html>

当我将鼠标悬停在图标和文本上时，我想使它旋转，但是当我将鼠标悬停在此代码上时，整个文本就会旋转。我应该怎么做才能使汽车旋转而不使整条线旋转？我必须在其中使用javascript吗？

我真的需要了解skew(xdeg)函数是如何工作的，所有研究似乎都无法解释x角如何影响其他点并使它失真，我需要知道它是否存在任何数学公式或一种能够期望x的结果的方式。使用特定的程度。

ps。我已经读过许多文档，其中最好的一个是DevDocs，其中说

此变换是剪切映射（对移），可将元素内的每个点在水平和垂直方向上变形一定角度。每个点的坐标都通过与指定角度和到原点的距离成比例的值进行修改；因此，一个点离原点越远，其增加的值就越大。

但是对于给定的角度将如何影响元素中的那些点，没有进一步的解释。

在SVG书中，它通过说它按特定值推动水平或垂直线来解释偏斜，但是我不知道如何将deg值转换为偏移一个

我尝试使用边框半径创建此CSS形状（功能区），但无法这样做，我能够获得的曲线与图像中的div曲线不完全匹配。

background: #008712;
  width: 89px;
  height: 22px;
  box-shadow: #d0dae0;
  background-color: #008712;
  border-bottom-left-radius: 70px;
}

如果我正确地解决了该问题，那么我将尽可能避免使用svgs。