js 实现Flip动画
时间: 2023-12-09 13:03:34 浏览: 29
Flip 动画是一种常见的界面交互动画,可以用 JavaScript 通过改变元素的样式实现。下面是一种简单的实现方式:
HTML:
```html
<div id="flip-container">
<div id="flipper">
<div id="front">Front</div>
<div id="back">Back</div>
</div>
</div>
```
CSS:
```css
#flip-container {
perspective: 1000px;
width: 200px;
height: 200px;
}
#flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
#front, #back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#front {
background-color: red;
}
#back {
background-color: blue;
transform: rotateY(180deg);
}
```
JavaScript:
```javascript
const flipper = document.querySelector('#flipper');
function flip() {
flipper.classList.toggle('flipped');
}
flipper.addEventListener('click', flip);
```
以上代码实现了一个点击翻转的 Flip 动画效果。当点击 `#flipper` 元素时,通过添加或删除 `flipped` 类来触发翻转动画。CSS 中的 `transform` 属性用于控制元素的旋转,`transition` 属性用于设置过渡时间,`backface-visibility` 属性用于控制元素背面是否可见,`perspective` 属性用于设置透视效果。