我在这里有一段CSS
@keyframes slidein {
0% {
transform: translateY(30px);
opacity: 0;
}
70% {
transform: translateY(-5px);
opacity: 0.25;
}
100% {
transform: translateY(0px);
opacity: 0.25;
}
}
@-webkit-keyframes slidein {
0% {
-webkit-transform: translateY(30px);
opacity: 0;
}
70% {
-webkit-transform: translateY(-5px);
opacity: 0.25;
}
100% {
-webkit-transform: translateY(0px);
opacity: 0.25;
}
}
@keyframes bounce {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-5px);
opacity: 1;
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-5px);
opacity: …当我在悬停时使用webkit 3d变换时,只有悬停区域的前50%可用,而底部50%不稳定.我目前正在测试Chrome(31.0.1650.63).这是一个错误吗？有没有解决方法？
尝试将鼠标放在div的顶部,然后慢慢将其放在底部.
HTML
<div class="hoverArea"></div>
<div class="flip">
<div class="front">front</div>
<div class="back">back</div>
</div>
CSS
.hoverArea, .flip, .front, .back {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.hoverArea {
z-index: 10;
}
.flip {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-webkit-perspective: 800;
z-index: 9;
}
.front {
background-color: #f00;
-webkit-backface-visibility: hidden ;
}
.back {
background-color: #f0f;
-webkit-transform: rotatex(-180deg);
-webkit-backface-visibility: hidden ;
}
.hoverArea:hover + .flip {
-webkit-transform: rotatex(-180deg);
}
我不确定究竟发生了什么,但我很确定这一点在起作用.
事件只是没有解雇(或者我没有正确地抓住它)
var $zoomBox = $('#zoomBox');
$zoomBox.bind('webkitTransitionEnd', function(e) {
alert("test");
});
$('.button').click(function (e) {
$zoomBox.css('-webkit-transform', 'matrix(2,1,1,2,300, 100)');
});
看下面的小提琴.框完成转换后,应弹出警报,但不显示警报.
给定一个"translateX(-50%) scale(1.2)"带有 N 个变换函数的字符串
1）我怎样才能匹配名字["translateX", "scale"]？
2）如何匹配值["-50%", "1.2"]？
我正在尝试根据窗口大小缩放iframe.通过iframe是一个1600px x 900px的html5游戏
我已经使用下面的脚本来扩展游戏,所以我知道可以做很多事情.虽然下面的代码将游戏渲染成一个小盒子,但是有什么方法可以让它缩放以适应窗口,同时保持16:9的宽高比？
<head>
<style type="text/css">
.tab{
position:relative;
width:265px;170px;
}
.tab iframe{
position:relative;
-webkit-transform: scale(0.3, 0.29);
-moz-transform: scale(0.3, 0.29);
transform: scale(0.3, 0.29);
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
transform-origin:0 0;
position:relative;
z-index:90;
}
</style>
</head>
<body>
<div id="tab0" class="tab">
<iframe src="game.html" width="1600" height="900" scrolling="no"></iframe>
</div>
</body>
作为参考,我是游戏艺术家,只使用代码(javascript/css/html)进行任务对话和其他较小的游戏功能.我目前是最后一个参与该项目的人,并且要求在游戏中实现此功能.
任何帮助将不胜感激!