vue翻书转场效果,vue 旋转
这篇文章主要为大家详细介绍了某视频剪辑软件实现牌面翻转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现牌面翻转效果的具体代码，供大家参考，具体内容如下
1.实现效果
实现一个点击沿中心Y轴翻转的翻转效果。
2.方法
分前（正面)后（后面)两部分，后面的差异通过钢性铸铁布局设定为将其翻转180度在前面的差异后面隐藏不显示，点击执行翻转动画，在执行翻转动画的时候设置在…后面；落后于的差异显示，之后将前面的差异隐藏。依次反复。
3.具体代码
模板
div id=try
！-盒子_滚动下执行正面翻转动画-
div class= roll box :class= { box _ rolling :正在滚动} @ click=正在滚动=！正在滚动
！-前面div -
div class=rollbox_front
div class=contentbox
img src= @/资产/图像/S1。巴布亚新几内亚/
/div
/div
！-后面div -
div class=rollbox_behind
div class=contentbox
img src= @/资产/图像/S2。巴布亚新几内亚/
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称："尝试",
data(){
返回{
isRolling:错误
}
}
}
/脚本
样式lang=scss
#尝试{。滚动框{
位置：相对；
视角：1000像素
宽度：200像素
高度：400像素
边距：100像素自动；
_front，
_在后面{
变换样式：保留-3d；//表示所有子元素在三维(三维的缩写)空间中呈现
背面-可见性：隐藏；//元素背面向屏幕时是否可见
过渡-持续时间：5s；
过渡-计时-功能："缓和";
背景：# 008080;内容框{
宽度：200像素
高度：400像素
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
img{
宽度：100像素
}
}
}
_在后面{
变换：旋转(180度);
可见性：隐藏；//元素不可见，但占据空间
位置：绝对；
top:0；
底部：0;
右：0;
左：0;
}
}。box_rolling{。滚动框_前部{
变换：旋转(180度);
可见性：隐藏；
}。滚动框_在后面{
变换：旋转角度(360度);
可见性：可见；
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。