CSS + jQuery：沿着容器的矩形缩放，居中和旋转图像

Question

我想用CSS做一些棘手的转换（如果需要的话，还有jQuery）。

我想要实现的目标：

• 我有一个容器，其宽度/高度由固定像素值或百分比设置（例如：蓝色矩形，600px x 1000px）

• 在此容器中，image with known original dimensions（在我的情况下，1000px x 200px）应为

  • 沿着容器的对角线绕着自己的中心（图像中间的+）旋转，

  • 放置在容器的中心（垂直，水平），

  • 缩放以不超过容器。

结果如下：

CSS / jQuery专家可以帮我解决如何实现这个目标吗？非常感谢！

Answer 1

结果应该是静态的，还是动画的/响应的，取决于屏幕/盒子大小？

position: absolute;
top: 50%;
left: 50%;
translate3d(-50%, -50%, 0);
transform: rotate(66deg) translate3d(-50%, -50%, 0);
transform-origin: 0% 0%;

旋转： transform: rotate(66deg);

森特尔庞特： transform-origin: 0% 0%;

居中绝对容器：

position: absolute;
top: 50%;
left: 50%;
translate3d(-50%, -50%, 0);

静态示例： http://codepen.io/anon/pen/NGwozM

：）

Answer 2

我制作了一个实际计算元素如何适合每种可能尺寸的脚本。如果您有一个元素.fitChildren，它将适合所有具有rotation属性的子元素。

查看this Fiddle

它接受长文本，并且还支持填充。

这是JavaScript

function fit () {
  $('.fitChildren').each(function(){
    var p = $(this)
    var pw = p.width()
    var ph = p.height()
    p.children('[rotation]').each(function(){
      var c = $(this)
      var cw = c.data('width')
      var ch = c.data('height')
      var ta = c.data('tan')
      var co = c.data('cos')
      var wi = pw / ((cw + (ch * ta)) * co * 2)
      var he = ph / ((ch + (cw * ta)) * co * 2)
      c.css({'transform':'translate(-50%,-50%)rotate('+c.data('angle')+'deg)scale('+(wi<he?wi:he)+')'})
    })
  })
}
$(function(){
  $('.fitChildren > [rotation]').each(function(){
    var t = $(this)
    var a = t.attr('rotation') % 360
    var rad = Math.abs(a) % 180
    if(rad > 90)rad = 180 - rad
    rad *= (Math.PI / 180)
    t.data({angle:a,tan:Math.tan(rad),cos:Math.cos(rad),width:t.outerWidth()/2,height:t.outerHeight()/2})
  })
  fit()
})
$(window).on('resize',function(){fit()})

该脚本首先为所有具有rotation属性的元素创建内部数据。该对象存储五个属性：

• angle [rotation]
• 角度切线
• 角度余弦
• 元素宽度
• 元素高度

然后当文档准备好并且发生调整大小时，调用fit()，它将循环遍历所有元素并将它们放在父母的内部。

希望这有帮助