排版黑科技：音乐360度旋转，视频满屏播放，3分钟学会

你们肯定很好奇，老沙上周推送的音乐和视频旋转的内容是怎么做到的👉 ↑↓→↗↘←↖↙ 教程来啦！

目录

❶ 旋转的音乐怎么做？

❷ 并排显示的音乐怎么做？

❸ 旋转+放大的视频怎么做？

以下所有操作

均需要通过Chrome浏览器完成

1. 旋转的音乐

❶ 使用Chrome浏览器，登录公众平台。 在新建的图文页面，点击右边的菜单，添加音频

❷ 点击右键-检查，进入代码页面

❸ 在弹出的网页里，点击左上角的小箭头

❹ 点击刚刚添加的音频，代码就跳到了音乐的部分

❺ 找到下图的p标签，双击p标签，再单击p标签右侧

把这段代码粘在空格里： s tyle="transform: rotate(90deg);" 。代码表示把音乐顺时针旋转90度

❻ 点击其他行的代码，你就会发现音乐旋转了

❼ 点击公众平台图文的保存，就可以了

效果预览

贴心沙师弟还录制了操作GIF

如果你想旋转各种角度，调整代码的数字就可以了。

📌 如果你在文首就添加了音乐，那么在浏览器和手机上预览，都是显示不全的。建议你先加入一些内容，然后旋转音乐。一边预览，一边调整就可以啦。

2. 并排显示的音乐

❶ 在i排版编辑器（iPaiban.com）左侧样式栏的 [ 卡片 ] 分类里，选择一个普通的卡片样式

❷ 在上方的颜色栏中，添加白色。添加好之后，点击一下，让所有有色样式的颜色都变成白色

❸ 点击刚才选好的卡片样式，添加到编辑框中。使用快捷键ctrl+A全选-ctrl+C复制-ctrl+V粘贴，到公众平台

在框里添加2首以上的音频

边框颜色是白色，看不见边框

❹ 点击右键-检查，进入代码页面

❺ 在弹出的网页里，点击左上角的小箭头

❻ 点击刚刚第一个音频，代码就跳到了音乐的部分

❼ 因为是在一个卡片样式里，所以p标签的代码和之前的有区别，在这个标签的结尾，加上代码： tr ansform: rotate(90deg) ，注意要加在引号之前

添加前

添加后

❽ 点击其他行的代码，你就会发现音乐旋转了。再点击公众平台图文的保存，就可以了

效果预览

3. 旋转+放大的视频

通常我们看到的推送里的视频看上去很小。如果想放大，必须点开全屏，再把手机横置，利用重力感应来放大视频。

沙师弟今天教给大家一个方法，只需要修改代码，就可以在推送中将视频横置并放大，非常好用！

❶ 使用Chrome浏览器，登录公众平台。 在新建的图文页面，点击右边的菜单，添加视频

❷ 点击右键-检查，进入代码页面

❸ 在弹出的网页里，点击左上角的小箭头

❹ 点击视频，代码就跳到了视频的部分

❺ 找到视频的p标签，双击p标签，再单击p标签右侧

把这段代码粘在空格里： style="max-width: 100%;display: block;transform: rotate(90deg) scale(1.8) translate(100px, 0px);box-sizing: border-box !important;word-wrap: break-word !important;"

❻ 点击其他行的代码，你就会发现视频旋转了。再 点击公众平台图文的保存，就可以了

效果预览

📌 如果你在文首就添加了视频，那么在浏览器和手机上预览，都是显示不全的。建议你先加入一些内容，然后旋转视频。一边预览，一边调整就可以啦！