css - 将触摸/滑动命令添加到 CSS 转换/动画-6ren

css - 将触摸/滑动命令添加到 CSS 转换/动画

转载作者：行者123 更新时间：2023-11-28 09:09:53

24

4

我正在尝试自学滑动功能，因为在这个时代它们变得越来越有用。我在旋转 div 下面有一个 css 动画。目前它只是在悬停时旋转，但我想要实现的是在滑动/触摸时旋转。

我的 CSS 动画

.trigger {
  width: 100%;
  height: 400px;
  background-color: white;
}

.hover-img {
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  text-align: center;
  font-size: 0;
}

.trigger:hover>.hover-img {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
  font-size: 14px;
  color: white;
}

我的 HTML

<div id="cell1">
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
<br><br><br><br>
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
</div>

这是一个 JS Fiddle显示我目前拥有的东西。

这是一个 livelink关于我在哪里使用这个动画，我会在问题得到回答后立即删除它，以供以后的帖子使用。

L.H 的更新 CSS

.trigger {
  width: 100%;
  height: 400px;
  background-color: white;
}

.hover-img:active {
  background-color: green;
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  text-align: center;
  font-size: 0;
}

.trigger:hover>.hover-img:active {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
  font-size: 14px;
  color: white;
}

更新的 HTML

<body ontouchstart="">

<div id="cell1">
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
<br><br><br><br>
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
</div>

最佳答案

我知道您写道，您想自己学习如何处理触摸和滑动，这很酷。此外，我知道如果您想要一个可靠的解决方案，可能还有很多工作要做，为什么我希望您查看已经提供的 Modernizr 库。

请检查一下: http://www.hongkiat.com/blog/detect-touch-device-modernizr/

如果您真的想自己编写低级代码，您至少可以从 Modernizr 库中得到启发。

祝一切顺利

关于css - 将触摸/滑动命令添加到 CSS 转换/动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26546517/

24

4

0

文章推荐：除第一个元素外的类的 Css 选择器

文章推荐： CSS 下拉说明

文章推荐：一个元素上的 CSS 事件，改变另一个元素

文章推荐： firefox - 带有渐变叠加的 CSS3 背景 - 渐变仅适用于 Firefox

linux - ] 命令 & 命令 > [忽略输出]
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 9 年前。 Improve this
sql - 对多个表执行一个 SQL 命令(无需重写 SQL 命令)
我有一系列 SQL 命令，我想在大约 40 个不同的表上运行。必须有一种方法可以在不编写 40 条不同命令的情况下执行此操作... 我在 SQL Server 中运行它。所有表都有不同的名称，我要操作
c# - PHP 命令 mysql_insert_id() 的等效 C#/SQLite 命令？
我习惯在 PHP 中使用命令“mysql_insert_id()”来返回插入到我的数据库中的最后一行的 id。在 C# 中的 SQLite 中是否有等效的命令？谢谢! -阿德娜最佳答案选择 l
回填 Hive 表的 Bash 命令——运行多个具有更改日期变量的 Hive 命令
试图找出一种方法来回填 ds 分区 Hive 表的分区。我知道如何从 CLI 运行 Hive 命令，例如 $HIVE_HOME/bin/hive -e 'select a.col from tab1
windows - 如何在 ftp 命令 "bye"后返回执行 cmd 命令？
我有 .bat 文件。看起来像下一个 ....many commands1 ftp -i -s:copy.txt ...many commands2 copy.txt 包含下一个命令 open ...
linux - 如果存在 git 命令，则使 bash 命令回退到 git 命令
基本上我想输入 show 并检查是否有 show 命令或别名已定义并触发它，如果未定义则触发 git show 。例如 rm 应该执行 rm 但 checkout 应该执行 git checkout
mysql - 试图找到与 MySQL 等效的 iSeries SQL 命令。特别是 "LABEL ON"命令
我公司的主数据库是 iSeries 机器，我已经非常习惯使用 DB2 命令和结构。我现在正在尝试做一个小项目，更新一个包含超过 300 万条记录的表。我想出一种比较和“清理”数据的更快方法是使用 My
node.js - NodeJS - 运行 shell 命令，退出，转移到 shell 命令
我想在带有 Node 的终端中制作一个简单的按钮板，并“blessed”用于连接或运行不同的命令。 ----------------------------------------------- _
python - selenium IDE 命令 'openWindow' 是否有等效的 selenium python webdriver 命令？
我们有一个 selenium IDE 脚本，正在转换为 python webdriver。以下命令未转换: [openWindow | http://mywebsite.com/index.php |
node.js - Windows 上的 Git Bash 命令，找不到 yarn 命令
我正在学习这个关于从 GIT HUB 下载和安装 Web 文件的在线教程。我进入主题:启动我们的静态网站，系统提示我输入命令以下载和安装 Web 文件。但是，当我输入命令 yarn install 时
linux - 如何在 shell 脚本中编写 elif 命令，如 elseif 或在 fortran 中的 else 命令
我在 shell 脚本中使用 elif 命令时遇到问题，就像在 fortran 中一样。我有 100 家公司的员工名单。我想屏蔽那些员工少于 500 人的公司。我的脚本是 rm -f categor
python - 我有几个 Linux 命令，我想在 Windows 机器上运行。如何在 Windows 上从 Python 运行 Linux 命令
我有一些 Linux 命令可以生成 token 。我在 Linux 机器上使用操作系统库形式的 Python 自动化了这些命令。它工作正常。但是，当我在 Windows 中尝试相同的代码时，它没有返
分享几个你可能不知道的交互式Git 命令
本文分享自华为云社区《Git你有可能不知道交互式暂存》，作者：龙哥手记。本节中的几个交互式 Git 命令可以帮助你将文件的特定部分组合成提交。当你在修改了大量文件后，希望这些改动能拆分为若干提交而
MySQL "in"命令
我想知道如何使用 IN 比较语法来做到这一点。当前的 SQL 查询是: select * from employee where (employeeName = 'AJAY' and month(e
Hadoop 命令
我在这个位置安装了 Hadoop /usr/local/hadoop$ 现在我想列出 dfs 中的文件。我使用的命令是: hduser@ubuntu:/usr/local/hadoop$ bin/ha
清除所有内容的 Docker 命令
是否有一个单一的 docker 命令可用于清除所有内容？如果正在运行，请停止所有容器、删除所有图像、删除所有卷...等。最佳答案我认为没有一个命令可以做到这一点。您首先需要停止所有容器使用 $ d
用于评估缓冲区中的方案表达式并显示粘贴在缓冲区中的结果的 Emacs 命令
我基本上是在 clojure/nrepl 模式中寻找与 C-u C-x C-e 或 C-c C-p 等效的 Scheme。我想要一个 C-x C-e 将输出打印到缓冲区，而不是仅仅在 repl 中。
vim - 在真实终端中运行 :! 命令
我可以在 vim 中使用 pudb(一个 ncurses Python 调试器)，因为，例如，:!python %在实际的终端窗口中运行。我更喜欢使用 gvim，但 gvim 运行 :!python
用于自动视频分割和缩略图创建的 FFMPEG 命令
我正在尝试编写一个 FFMPEG 命令: 取为输入一个视频 input.mp4 和一个图像 pic.jpg 作为输出将 input.mp4 拆分为 20 秒的视频，按顺序重命名；对于每个分割视
ffmpeg vstats 命令
我想转储视频每帧的比特率。我正在尝试使用 -vstats 获取此信息命令。当我运行此命令时 - ffmpeg -i input.mp4 -vstats 它显示至少应该定义一个文件。如果有人能建议我任

首页

博学

6Ren·AI

商城

css - 将触摸/滑动命令添加到 CSS 转换/动画