注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码

充值

CSS3 SVG图文卡片内容翻转切换特效

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2024-03-08
CSS3 SVG图文卡片内容翻转切换特效
这是一款简单又创意个性的CSS3 SVG图文卡片内容翻转切换特效,左右箭头按钮控制切换。


js代码

<script>
var stage = document.querySelector('.stage');
var background = document.querySelector('.background');

var rotation = 0;

document.querySelector('.button_prev').
addEventListener('click', function () {return applyStyles(rotation += 90);});

document.querySelector('.button_next').
addEventListener('click', function () {return applyStyles(rotation -= 90);});

function applyStyles() {
  background.style.filter = 'hue-rotate(' + rotation + 'deg)';
  stage.style.transform = 'rotateZ(' + rotation + 'deg)';
}</script>