当CSS元素从原始位置转换出来时,它们transform-origin不会随之移动; 使所有后续的变换和旋转仍然源于它的原始transform-origin(下面的例子).
我知道有一种解决方法...那就是继续将所有新变换添加到前一个变换的右侧.像这样:transform: translateY ( -5rem ) rotate( 45deg ) translateY( -10rem ) rotate( 15deg )...等等.这似乎总是根据需要从当前元素的中心开始新的变换.
问题
当您使用此技术基于用户输入转换元素时,您将继续向DOM添加转换......无休止地.占用大量内存并导致其他不需要的滑动效果(可能).
这是一个动画,显示transform-origin每次转换后如何不移动到元素的中心:
'use strict';
function firstRotation() {
var v = document.getElementById( 'v-wrp' ),
status = document.getElementById( 'status' )
setTimeout( function() {
status.innerHTML = 'First, the V is rotated around it\'s central axis.\
The <b>transform-origin</b> is centered.';
v.classList.add( 'first-rotation' );
status.classList.add( 'update' );
}, 1000 );
}
function firstTranslation() {
var v = document.getElementById( 'v-wrp' ), …我有一个奇怪的问题.我的CSS中的媒体查询规则触发了一定宽度,就像它们应该的那样,但是如果我已经将浏览器窗口的大小调整到那个较小的宽度,那么将浏览器窗口扩展到它之外就会发生奇怪的事情.在刷新页面之前,事情看似正常.布局仅在页面刷新时以意外方式更改.当然,目标是使媒体查询正常运行,因为页面刷新不应更改任何规则.
我尝试使用裸骨重新创建问题:
//CSS media queries added to style tag here to prevent scrolling in other code blocks
var style = document.getElementsByTagName('style')[ 0 ];
style.innerHTML +=
' \
@media( max-width: 550px ) { \
body { \
background-color: #ddd; \
transition: 1s; \
} \
main { \
height: auto; \
text-align: center; \
} \
.circle, .about-container { \
float: none; \
} \
.circle { \
display: inline-block; \
transform: translateY( 0 ); \
} \
.about-container { \ …我的main（天蓝色）元素似乎比其子元素占用的宽度更多。它的显示设置为inline-block，这让我很好奇为什么它的宽度没有自动设置为auto。直接子元素也显示为inline-block，但它们的宽度组合 = 小于 100% 宽度。这里发生了什么？我该如何解决这个问题并使main元素只占用它需要的空间而不是整个 100% 的宽度？
/* ///////////////////////////////// IMPORTS /////////////////////////////// */
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
/* ///////////////////////////////// INITIAL /////////////////////////////// */
* {
box-sizing: border-box;
}
body {
background-color: red;
text-align: center;
}
main {
display: inline-block;
width: 90%;
background-color: skyblue;
text-align: left;
}
main p {
margin: 0;
padding: 10px;
color: #bbb;
font-size: 0.9rem;
}
a {
color: #fff;
text-decoration: none;
}
a[href="#"] {
display: inline-block;
width: 25%;
margin: 2.2%;
background-color: …目标:将button元素固定到元素的底部main.我试着用相对定位定位它的容器,所以它粘在底部:
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
这根本不是移动.wrapperdiv.想法？
@import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );
* {
box-sizing: border-box;
}
main {
background-color: #eee;
}
main, input {
padding: 2%;
}
main input {
width: 100%;
margin: 5% 0;
border: 0;
}
.clr-fix::after {
content: "";
display: block;
clear: both;
}
.wrapper {
width: 23%;
margin: 1%; …我已经为示例修改了此代码,因此日期和时间当前没有更新.基本的解释是:有一个计数器跟踪当前时间并每秒刷新,将其推送到一个元素DOM.但是我想在一天的两个特定时间之间执行代码.这些时间在setDrwBrks函数中定义如下:
mBrkStrt.setHours( 9, 50, 0 ); mBrkEnd.setHours( 10, 3, 0 );
dBrkStrt.setHours( 12, 17, 0 ); dBrkEnd.setHours( 12, 30, 0 );
eBrkStrt.setHours( 17, 50, 0 ); eBrkEnd.setHours( 18, 3, 0 );
nBrkStrt.setHours( 22, 2, 0 ); nBrkEnd.setHours( 22, 15, 0 );
这是我在fndNxtDrwBrk( date )函数中的问题代码:
for( j = 0; j < 4; j++ ) {
if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
dspl.textContent += '... First statement executed'; …有一个非常小的类似小行星的游戏片段,我正在使用没有Canvas的DOM.当箭头键被按下时,我的"船"移动相当顺畅但是当箭头键被按住较长时间时,我将如何使船加速(速度和旋转)？
window.onkeyup = function( e ) {
var kc = e.keyCode;
e.preventDefault();
if ( kc === 37 ) Keys.left = false;
else if ( kc === 38 ) Keys.up = false;
else if ( kc === 39 ) Keys.right = false;
else if ( kc === 40 ) Keys.down = false;
};
function update() {
if ( Keys.up ) {
document.querySelector( 'div' ).style.transform += 'translateY( -1px )';
}
else if ( Keys.down ) {
document.querySelector( 'div' ).style.transform += 'translateY( 1px …css ×5
html ×3
javascript ×3
animation ×2
css-float ×1
css-position ×1
datetime ×1
game-physics ×1
if-statement ×1
position ×1
time ×1