2、当使用eulerAngles属性要设置旋转，重要的是要理解，提供了X、Y和Z旋转值来描述旋转。
1、我们用两个相同的div编辑它，这是基本的div代码。
2、这是一个没有旋转的div。然后我们只设置灰蓝色div的旋转，以便我们确切地知道旋转中心点是什么。
3、设置灰蓝色div是使用.t类名，然后使用变换，然后旋转。注意角度是deg，这里我们设置旋转45度。
4、然后查看对比度，灰色蓝色div已旋转，旋转的中心点默认为div的中心。
5、如果我们想设置旋转的中心点，我们可以使用transform-origin属性。将旋转中心设置为左上角，这意味着左上角是旋转中心。
6、此时，旋转中心已经改变，它已经变为左上角。效果如下。
你好，分析了一下你的问题：
直接对某个元素使用transform沿着对角线翻转似乎实现不了
但是可以在其外部嵌套一个盒子间接实现，我写了一个简单的demo：
<style>.pers {
margin: 100px auto 0
width: 200px
height: 200px
border: 1px dashed #ccc
}
.rotater {
width: 200px
height: 200px
-webkit-transition: -webkit-transform .5s ease-out
-o-transition: -o-transform .5s ease-out
transition: transform .5s ease-out
-webkit-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
overflow: hidden
}
.pers:hover .rotater {
-webkit-transform: rotate(45deg) rotateY(180deg)
-ms-transform: rotate(45deg) rotateY(180deg)
-o-transform: rotate(45deg) rotateY(180deg)
transform: rotate(45deg) rotateY(180deg)
}
.main {
margin: 50px 0 0 50px
width: 100px
height: 100px
line-height: 100px
text-align: center
font-size: 90px
border: 1px solid #ccc
background-color: #333
color: #fff
font-weight: bold
-webkit-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
}
</style>
<div class="pers">
<div class="rotater">
<div class="main">|</div>
</div>
</div>
希望能解决你的问题，或者能给你一点启发也是好的。
如有疑问请追问，望采纳~
