设为首页收藏本站
开启辅助访问 切换到宽版 登录 立即注册 QQ登录

花潮论坛

搜索
热搜: 活动 交友 discuz
12下一页
返回列表 发新帖
查看: 683|回复: 35

CSS 3d旋转代码分享

[复制链接]
马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
    发表于 2022-1-3 18:16 | 显示全部楼层 |阅读模式

    请马上登录，朋友们都在花潮里等着你哦：）

    您需要 登录 才可以下载或查看，没有账号？立即注册

    x

    本示范针对图片，其他HTML可视box元素也行，如div等。效果需要鼠标移动到图片来触发，代码放在二楼：
     

    评分

    参与人数 2威望 +80 金钱 +160 经验 +80 收起 理由
    加林森 + 30 + 60 + 30 赞一个!
    红影 + 50 + 100 + 50 赞一个!

    查看全部评分

    回复

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 18:17 | 显示全部楼层
    本帖最后由 马黑黑 于 2022-1-3 18:26 编辑

    核心代码：

    <style type="text/css">
    .iRotate {
            cursor:pointer;
            transition:1s ease;
    }
    .iRotate:hover {
             transform:rotateY(180deg);
    }
    </style>

    <img class="iRotate" alt="" src="https://www.huachaowang.com/data/attachment/forum/202201/03/093625rzd54d5fgoehr0cn.jpg">

    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 18:23 | 显示全部楼层
    本帖最后由 马黑黑 于 2022-1-3 23:54 编辑

    3d旋转也是用到 transform ，不同的是 2d 用的是 rotate，3D用的是 rotateX 和 otateY，示范中使用了 rotateY 属性，可以试试 rotateX 感受一下两者间的区别。

    transition:1s ease 一句的作用是让变化不那么生硬，没有也行。
    回复 支持 反对

    使用道具 举报

    杨柳青

    该用户从未签到

    49

    主题

    4663

    回帖

    1万

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪春风拂面飞龙在天共看流星指尖上的流年
    发表于 2022-1-3 18:31 | 显示全部楼层
    点一下旋转一次~~
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 18:47 | 显示全部楼层
    杨柳青 发表于 2022-1-3 18:31
    点一下旋转一次~~

    不用点，移过去就行，就一次
    回复 支持 反对

    使用道具 举报

    樵歌
  • TA的每日心情
    奋斗
    2025-12-14 08:26

    • 签到天数: 646 天

    [LV.9]以坛为家II

    1374

    主题

    7万

    回帖

    13万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥多彩人生海样胸怀春风拂面青草情怀心曲飞扬七彩绚丽活泼开朗男儿情怀鹰傲苍穹共看流星风雨同行我心永远天长地久幸福快乐春意盎然喜乐安康心想事成周年庆指尖上的流年舞会之星情人节花潮管理
    发表于 2022-1-3 19:23 | 显示全部楼层
    电脑里面的名堂好深沉，小黑都吃通透了。
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 19:38 | 显示全部楼层
    樵歌 发表于 2022-1-3 19:23
    电脑里面的名堂好深沉，小黑都吃通透了。

    弱水三千我只取一瓢饮
    回复 支持 反对

    使用道具 举报

    加林森
  • TA的每日心情
    开心
    2023-6-15 10:31

    • 签到天数: 525 天

    [LV.9]以坛为家II

    1383

    主题

    3万

    回帖

    10万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀青草情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀男儿情怀鹰傲苍穹花好月圆飞龙在天王者至尊大将风范天籁妙音共看流星风雨同行幸福快乐喜乐安康指尖上的流年花潮版主
    发表于 2022-1-3 19:44 | 显示全部楼层
    厉害厉害，老黑，我真的佩服你。我没有分了，不能评分了哈。
    　
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 19:46 | 显示全部楼层
    加林森 发表于 2022-1-3 19:44
    厉害厉害，老黑，我真的佩服你。我没有分了，不能评分了哈。

    分不分无所谓，给5刀就行
    回复 支持 反对

    使用道具 举报

    加林森
  • TA的每日心情
    开心
    2023-6-15 10:31

    • 签到天数: 525 天

    [LV.9]以坛为家II

    1383

    主题

    3万

    回帖

    10万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀青草情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀男儿情怀鹰傲苍穹花好月圆飞龙在天王者至尊大将风范天籁妙音共看流星风雨同行幸福快乐喜乐安康指尖上的流年花潮版主
    发表于 2022-1-3 19:53 | 显示全部楼层
    马黑黑 发表于 2022-1-3 19:46
    分不分无所谓，给5刀就行

    给了十刀还不够吗？
    　
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 20:05 | 显示全部楼层
    加林森 发表于 2022-1-3 19:53
    给了十刀还不够吗？

    差不多差不多
    回复 支持 反对

    使用道具 举报

    红影
  • TA的每日心情
    开心
    2025-12-1 20:32

    • 签到天数: 1052 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析（喊冤）章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理
    发表于 2022-1-3 20:07 | 显示全部楼层
    这个好像鼠标上去，有时直接转换到镜像图，有时还是原图。
    不过鼠标能让图片缩小，也很神奇
    　
    回复 支持 反对

    使用道具 举报

    加林森
  • TA的每日心情
    开心
    2023-6-15 10:31

    • 签到天数: 525 天

    [LV.9]以坛为家II

    1383

    主题

    3万

    回帖

    10万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀青草情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀男儿情怀鹰傲苍穹花好月圆飞龙在天王者至尊大将风范天籁妙音共看流星风雨同行幸福快乐喜乐安康指尖上的流年花潮版主
    发表于 2022-1-3 20:09 | 显示全部楼层
    马黑黑 发表于 2022-1-3 20:05
    差不多差不多

    应该满足了吧
    　
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 20:19 | 显示全部楼层
    加林森 发表于 2022-1-3 20:09
    应该满足了吧

    还行还行
    回复 支持 反对

    使用道具 举报

    加林森
  • TA的每日心情
    开心
    2023-6-15 10:31

    • 签到天数: 525 天

    [LV.9]以坛为家II

    1383

    主题

    3万

    回帖

    10万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀青草情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀男儿情怀鹰傲苍穹花好月圆飞龙在天王者至尊大将风范天籁妙音共看流星风雨同行幸福快乐喜乐安康指尖上的流年花潮版主
    发表于 2022-1-3 20:19 | 显示全部楼层
    马黑黑 发表于 2022-1-3 20:19
    还行还行

    那就好那就好
    　
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 20:20 | 显示全部楼层
    红影 发表于 2022-1-3 20:07
    这个好像鼠标上去，有时直接转换到镜像图，有时还是原图。
    不过鼠标能让图片缩小，也很神奇

    这效果应该跟CPU、GPU性能有关。你的机器应该是古董级别的
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 20:21 | 显示全部楼层
    加林森 发表于 2022-1-3 20:19
    那就好那就好

    回复 支持 反对

    使用道具 举报

    加林森
  • TA的每日心情
    开心
    2023-6-15 10:31

    • 签到天数: 525 天

    [LV.9]以坛为家II

    1383

    主题

    3万

    回帖

    10万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀青草情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀男儿情怀鹰傲苍穹花好月圆飞龙在天王者至尊大将风范天籁妙音共看流星风雨同行幸福快乐喜乐安康指尖上的流年花潮版主
    发表于 2022-1-3 20:24 | 显示全部楼层
    马黑黑 发表于 2022-1-3 20:21

    　
    回复 支持 反对

    使用道具 举报

    樵歌
  • TA的每日心情
    奋斗
    2025-12-14 08:26

    • 签到天数: 646 天

    [LV.9]以坛为家II

    1374

    主题

    7万

    回帖

    13万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥多彩人生海样胸怀春风拂面青草情怀心曲飞扬七彩绚丽活泼开朗男儿情怀鹰傲苍穹共看流星风雨同行我心永远天长地久幸福快乐春意盎然喜乐安康心想事成周年庆指尖上的流年舞会之星情人节花潮管理
    发表于 2022-1-3 20:37 | 显示全部楼层
    马黑黑 发表于 2022-1-3 19:38
    弱水三千我只取一瓢饮

    瞧瞧，有大本事的人都谦虚不是。
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-12-14 13:47

    • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2022-1-3 21:03 | 显示全部楼层
    樵歌 发表于 2022-1-3 20:37
    瞧瞧，有大本事的人都谦虚不是。

    谦虚使人发胖
    回复 支持 反对

    使用道具 举报

    下一页 »
    12下一页
    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持：DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-12-15 04:59 , Processed in 0.116412 second(s), 26 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表