如何旋转外部div而不是内部内容

Question

如何在div内放置图像并将该div旋转45度？

Answer 1

以scale的变换样式添加img值，如下所示：

.profile-photo { width: 210px; height: 210px; position: relative; left: 43px; top: 50px; border: 8px solid #000; border-radius: 60px; transform: rotate(45deg); overflow: hidden; z-index: 2; background: #34983e;padding:0 }

.profile-photo img {
  width: 100%;
  transform: rotate(-45deg) scale(1.21)
}

<div class="profile-photo"> 
  <img alt="Profile photo" src="http://www.michiganurology.com/wp-content/uploads/2015/10/reddy.jpg" onerror="this.onerror=null;this.src='https://via.placeholder.com/500/E5E8EC/4B89DA?text=error+image';">
</div>

Answer 2

使用下面的代码。

HTML

for i in df.index:
    if df.at[i, 2] == 'Calm': 
        df.at[i, 2] = 1
    else:
        df.at[i, 2] = re.findall('[0-9]+', df.at[i, 2])[0]

CSS

<div class="div">
    <img src="index.png">
</div>

W3schools transforms