标签: css-transforms

我想要做的是一个jQuery脚本,它旋转div中的元素,具体取决于浏览器窗口中的光标位置.

比例如下:

maximum_pixels_x-axys:2°= center_pixels_x-axys:0°

和y轴相同.

如果光标位于屏幕的中心,则不旋转.如果它在其他地方,它必须从0°旋转到2°(或负值,取决于相对笛卡尔平面中屏幕的位置).所以这是一个动态轮换,立即反馈.

就像你在这里看到的:http://css3playground.com/flashlight.php(从菜单"Bevel"中选择)但是使用transform:rotate而不是text-shadow.

现在我尝试使用transit.js,使用sin e cos而不是degree(将导致从0到1的"度").我知道,这不是正确的方法,但它是我想象的最接近度数的方法.

var max_x = $(window).width();
var max_y = $(window).height();
var center_x = (max_x/2);
var center_y = (max_y/2);

$(document).mousemove(function(e) {
    var mouse_x = e.pageX,
    mouse_y = e.pageY,
    hypotenuse = Math.sqrt(Math.pow((mouse_x-center_x),2)+Math.pow((mouse_y-center_y), 2)),
    cos = (mouse_x-center_x)/hypotenuse,
    sin = (mouse_y-center_y)/hypotenuse;
    $('#div1, #div2').transition({ perspective: '400px', rotateX: sin, rotateY: cos });
});

但结果并不是我的预期.div旋转(以错误的方式旋转,但旋转),但不是动态的.

我该怎么办？

小提琴:http://jsfiddle.net/lucgenti/LtWtW/11/

我是CSS转换和动画的新手，我只是想知道两者之间有什么区别。

我-webkit-transform针对的是chrome，-moz-tranform而针对Mozilla Firefox。我找不到-webkit和-ms之间的区别。

我正在尝试更改CSS动画关键帧,它正在反弹Y轴方向,但我试图将其更改为X轴意味着尝试从左到右或从右到左反弹.

小提琴: http ://jsfiddle.net/5y8ebfcw/

HTML:

<div class='thisone'></div>

CSS:

.thisone {
-webkit-animation-name: slybounce;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-moz-animation-name: slybounce;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
}


@-webkit-keyframes slybounce {
  0% {
    -webkit-transform: translate(0, -5);
  }
  50% {
    -webkit-transform: translate(0, 5px);
  }
  100% {
    -webkit-transform: translate(0, -5);
  }
}

@-moz-keyframes slybounce {
  0% {
    -moz-transform: translate(0, -5);
  }
  50% {
    -moz-transform: translate(0, 5px);
  }
  100% {
    -moz-transform: …

我有这个主要工作(请参阅https://jsfiddle.net/90ycrope/1/)但是第二个div中带有"后面"一词的内容在整个过程中都是可见的.

我想要实现的两个目标是:

1. 正确的功能(背后可见内容,前面可见前面的内容)

2. 效率 - 我认为代码有一种更简单的方法吗？

HTML:

<div class="box_holder">
<div class="front">Some content here</div>
<div class="back">Behind</div>
</div>

jQuery的:

$(document).ready(function () {
  $('.box_holder').click(function () {
    $(this).toggleClass('show_info')
  });
});

CSS:

.box_holder {
    display: block;
    position: relative;
    float: left;
    left: 8px;
    top: 8px;
    width: 240px;
    height: 335px;
    text-align: center;
    font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    background: #C3C3C3;
    color: #3b3b3b;
    font-size: 1em;
    line-height: 1.32;
    margin-right: 16px;
    margin-bottom: 32px;
    transition: 1s;
}
.box_holder.show_info {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.box_holder.show_info …

当href的扩展名是.pdf时，我喜欢这样做。.doc; .ppt; .xls，然后它将在其前面添加相应的文件图片。然后，当我将鼠标悬停在链接上时，我尝试将其缩小，但是却什么也没做！我做错了什么还是什么？

码：

ul{
  list-style-type: none;
}
ul a{
  text-decoration:none;
  padding-left: 20px;
  background-repeat: no-repeat;
}
ul a:hover{
  text-decoration:underline;
  color:#666;
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
a[href$=".pdf"]{
  background-image:url(http://i.stack.imgur.com/zJlYq.gif);
}
a[href$=".doc"]{
  background-image:url(http://i.stack.imgur.com/z2lbW.gif);
}
a[href$=".ppt"]{
  background-image:url(http://i.stack.imgur.com/Tk5Vv.gif);
}
a[href$=".xls"]{
  background-image:url(http://i.stack.imgur.com/sOr7E.gif);
}

<ul>
  <li><a href="/one.pdf">pdf</a></li>
  <li><a href="/two.doc">doc</a></li>
  <li><a href="/three.ppt">ppt</a></li>
  <li><a href="/four.xls">xls</a></li>
</ul>

在css变换和伪元素的帮助下,我用箭头形状的右边框制作了css按钮.现在我正在尝试在悬停时添加过渡到背景,但是在过渡颜色不同的过程中,在按钮与伪元素重叠的地方意识到存在问题.请参阅下面的内容,尝试将鼠标悬停在:

body {
  background: gray;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px …

我需要显示span链接悬停并在2秒后将其隐藏在mouseout上.以下是我所做的代码.这可以使用JS完成.但是,我只需要CSS解决方案.

显示跨度的当前速度是完美的.我只需要在2秒后将它隐藏在mouseout上.

.hoverBox span {
  opacity: 0;  
  transition: opacity 0.5s;
}
.hoverBox:hover span {
  opacity: 1;  
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

如何使用flexbox布局垂直居中旋转文本？我想要看起来像这样的东西：

这是我到目前为止的内容：

html, body { height: 100%; }
body { background-color: #efefef; }

body > div {
  align-content: center;
  background-color: white;
  border: 1px solid black;
  display: flex;
  height: 100%;
  width: 25px;
}

body > div > div {
  flex: 1;
  transform: rotate(-90deg);
}

<div>
  <div>
    Where did I go?
  </div>
</div>

我有一个类似于这个小提琴的情况,我有一个CSS3动画,可以缩放绝对位于另一个元素中心的元素.然而,当动画发生时,它是偏心的,如示例中相对于蓝色的红色方块所示.我该如何居中？我在该transform-origin属性周围尝试了几种配置,但这并没有产生正确的结果.

代码如下:

@-webkit-keyframes ripple_large {
  0% {-webkit-transform:scale(1);}
  75% {-webkit-transform:scale(3); opacity:0.4;}
  100% {-webkit-transform:scale(4); opacity:0;}
}

@keyframes ripple_large {
  0% {transform:scale(1); }
  75% {transform:scale(3); opacity:0.4;}
  100% {transform:scale(4); opacity:0;}
}

.container {
  position: relative;
  display: inline-block;
  margin: 10vmax;
}

.cat {
  height: 20vmax;
}

.center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10px;
  width: 10px;
  background: blue;
}

.to-animate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  height: 5vmax; …

请考虑以下按钮样式:

body {
  padding: 1rem;
}

button {
  background: blue;
  color: #fff;
  padding: 1rem;
}

button:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

<button>kinda shaky</button>  

当我指着边界时,按钮开始跳舞!!

如何修复跳舞按钮？