css3动画

原创已于 2023-01-17 17:46:08 修改 · 68 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-01-17 08:48:24 首次发布

文章介绍了如何在JavaScript中导入cs库，结合classnames库来根据变量isbool的值动态地添加或移除tranform2样式类。示例展示了在div元素上应用CSS3的transform属性，包括translate、scale和rotate等变换方法。

cs插件

import cs from 'classnames'//判断isbool的值,判断是否加入 tranform2的name名

用法:

<div styleName={cs('tranform', { tranform2: isbool })}>

                tranform

            </div>

css3:

transform: translateX(500px);//x轴移动500px

transform: translate(100px, 50px);//(x,y)

transform: scale(1, 0.5);//缩小

rotate: 45deg;//旋转