Web初学者--作业4-[3D旋转的动态效果]

ONLY＆King

于 2022-05-11 15:37:22 发布

阅读量214

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_45229580/article/details/124700715

版权

1.项目介绍

这是一个简单的，3D旋转效果图，纯属html+css+JS动画而成，可以给喜欢的人表白哦~~

效果图如下：

Happy Birthday

2.项目分析

（1）html里写上基础的div标签就可以啦

（2）css样式里，添加：root，简单设置一下视觉距离，再给添加上动画和反向动画

（3）JS里，添加自己想要看到的词语，获取各自元素节点之后，对之进行DOM操作就可以啦

（具体可以看下面代码哦~~）

3.代码部分

A：html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=

最低0.47元/天解锁文章

ONLY＆King

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web初学者--作业4-[3D旋转的动态效果]

1.项目介绍这是一个简单的，3D旋转效果图，纯属html+css+JS动画而成，可以给喜欢的人表白哦~~效果图如下：2.项目分析（1）html里写上基础的div标签就可以啦（2）css样式里，添加：root，简单设置一下视觉距离，再给添加上动画和反向动画（3）JS里，添加自己想要看到的词语，获取各自元素节点之后，对之进行DOM操作就可以啦（具体可以看下面代码哦~~）3.代码部分A：html<!DOCTYPE html><html lang
复制链接

扫一扫