在45度的情况下效果很好。我还不确定如何从transform属性中提取45度。
<!doctype html><div style="border:1px solid black;display:inline-block"><div style="background:pink"><div id=b style="transform: rotate(-45deg) translateZ(0px);display:inline-block;transform-origin:top left;" contenteditable id=box>testing 1234125<br>
123<br>
456<br>
78910</div></div></div><script>
function toDegrees (angle) {
return angle * (180 / Math.PI);
}
function toRadians (angle) {
return angle * (Math.PI / 180);
}
var d = document.getElementById('b'),
observer = new MutationObserver(callback);
observer.observe(d, { characterData: true, attributes: true, childList: true, subtree: true });
new MutationObserver(callback);onload=callback;
//document.addEventListener("input",callback);
function callback(){
d.parentElement.style.width = parseInt(getComputedStyle(d).height.slice(0,-2))*Math.cos(toRadians(45))+"px";
d.style.whiteSpace="nowrap";
d.parentElement.style.paddingTop = parseInt(getComputedStyle(d).width.slice(0,-2))*Math.sin(toRadians(45))+"px";
d.parentElement.style.height = parseInt(getComputedStyle(d).height.slice(0,-2))*Math.sin(toRadians(45))+"px";
d.parentElement.parentElement.style.width = parseInt(getComputedStyle(d).width.slice(0,-2))*Math.sin(toRadians(45)) + parseInt(getComputedStyle(d).height.slice(0,-2))*Math.cos(toRadians(45))+"px";
}</script>
