淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2832|回复: 20
收起左侧

《大伟》 360度旋转效果

[复制链接]
  • TA的每日心情

    2016-9-27 02:36
  • 签到天数: 52 天

    连续签到: 1 天

    [LV.5]略有小成

    3

    主题

    107

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    26034

    发表于 2015-7-3 09:42:19 | 显示全部楼层 |阅读模式
    潜水好久,话不多说,上图上代码:
    预览地址:http://yong01.taobao.com/
    GIF.gif




    css:

    1. .dawei_360:hover{transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}
    2. .dawei_360{-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
    3. .dawei_360:hover{transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}






    html:

    1. <div style="height:650px;">
    2.   <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{"activeTriggerCls":"duang!duang!!duang!!! -_--shop-nav-ch","interval":0.1,"activeIndex":1,"navCls":"dawei_nav","contentCls":"dawei_content","autoplay":true}">
    3.     <ul class="dawei_content hidden" style="display:none;">
    4.       <div>
    5.          
    6.       </div>
    7.     </ul>
    8.     <ul class="dawei_nav">
    9.       <div class="dawei-tshop-psm-shop-ww-hover taobaobug " style="left:auto;display:block;z-index:99;">
    10.         <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
    11.           <div class="footer-more-trigger" style="left:-1040px;top:auto;border:none;padding:0;">
    12.             <div style="height:650px;width:1920px;">
    13.               <div style="width:1400px;height:190px;padding-left:390px;float:left;">
    14.                 <div style="height:150px;width:1400px;float:left;">
    15.                    <img src="//gdp.alicdn.com/imgextra/i1/358606781/TB23uW7cFXXXXatXXXXXXXXXXXX_!!358606781.png" alt=" 服务项目" />
    16.                 </div>
    17.                 <ul>
    18.                    <a  title="首页设计/QQ56481349" target="_blank">
    19.                   <div style="width:140px;height:190px;float:left;text-align:center;">
    20.                      <span style="width:140px;height:190px;display:block;">
    21.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    22.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i4/358606781/TB2VeC8cFXXXXaeXXXXXXXXXXXX_!!358606781.png" />
    23.                     </div>
    24.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">首页设计 <br />
    25.                      <span style="color:#999999;font-size:12px;">淘宝/天猫/京东首页</span> </span> </span>
    26.                   </div>
    27.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    28.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;">
    29.                      <span style="width:140px;height:190px;display:block;">
    30.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    31.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i2/358606781/TB2TP94cFXXXXaDXXXXXXXXXXXX_!!358606781.png" />
    32.                     </div>
    33.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">手机店铺 <br />
    34.                      <span style="color:#999999;font-size:12px;">无线端店铺设计</span> </span> </span>
    35.                   </div>
    36.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    37.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;">
    38.                      <span style="width:140px;height:190px;display:block;">
    39.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    40.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i1/358606781/TB2xm58cFXXXXXNXXXXXXXXXXXX_!!358606781.png" />
    41.                     </div>
    42.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">爆款打造 <br />
    43.                      <span style="color:#999999;font-size:12px;">详情页设计/提高转化率</span> </span> </span>
    44.                   </div>
    45.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    46.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;">
    47.                      <span style="width:140px;height:190px;display:block;">
    48.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    49.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i1/358606781/TB22Yi7cFXXXXXYXXXXXXXXXXXX_!!358606781.png" />
    50.                     </div>
    51.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">主图设计 <br />
    52.                      <span style="color:#999999;font-size:12px;">主图高端定制</span> </span> </span>
    53.                   </div>
    54.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    55.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;">
    56.                      <span style="width:140px;height:190px;display:block;">
    57.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    58.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i1/358606781/TB2d9_XcFXXXXXAXXXXXXXXXXXX_!!358606781.png" />
    59.                     </div>
    60.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">海报设计 <br />
    61.                      <span style="color:#999999;font-size:12px;">全屏海报/950/990</span> </span> </span>
    62.                   </div>
    63.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    64.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;">
    65.                      <span style="width:140px;height:190px;display:block;">
    66.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    67.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i2/358606781/TB2M32XcFXXXXXAXXXXXXXXXXXX_!!358606781.png" />
    68.                     </div>
    69.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">美工包月 <br />
    70.                      <span style="color:#999999;font-size:12px;">没美工?找我!</span> </span> </span>
    71.                   </div>
    72.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    73.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;">
    74.                      <span style="width:140px;height:190px;display:block;">
    75.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    76.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i2/358606781/TB2ef5YcFXXXXX7XpXXXXXXXXXX_!!358606781.png" />
    77.                     </div>
    78.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">店铺模版 <br />
    79.                      <span style="color:#999999;font-size:12px;">出售各类目SDK模版</span> </span> </span>
    80.                   </div>
    81.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    82.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;">
    83.                      <span style="width:140px;height:190px;display:block;">
    84.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    85.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i4/358606781/TB2fcDdcFXXXXXbXXXXXXXXXXXX_!!358606781.png" />
    86.                     </div>
    87.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">代码定制 <br />
    88.                      <span style="color:#999999;font-size:12px;">定制任何代码特效</span> </span> </span>
    89.                   </div>
    90.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    91.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-top:40px;">
    92.                      <span style="width:140px;height:190px;display:block;">
    93.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    94.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i4/1028795839/TB2bDn7cXXXXXbZXXXXXXXXXXXX_!!1028795839.png" />
    95.                     </div>
    96.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">钻展设计 <br />
    97.                      <span style="color:#999999;font-size:12px;">无线直通车/钻展定制</span> </span> </span>
    98.                   </div>
    99.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    100.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;margin-top:40px;">
    101.                      <span style="width:140px;height:190px;display:block;">
    102.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    103.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i2/1028795839/TB2W6_2cXXXXXbbXpXXXXXXXXXX_!!1028795839.png" />
    104.                     </div>
    105.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">主图视频 <br />
    106.                      <span style="color:#999999;font-size:12px;">主图视频/宣传视频</span> </span> </span>
    107.                   </div>
    108.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    109.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;margin-top:40px;">
    110.                      <span style="width:140px;height:190px;display:block;">
    111.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    112.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i3/358606781/TB2XkHdcFXXXXXbXXXXXXXXXXXX_!!358606781.png" />
    113.                     </div>
    114.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">图片处理 <br />
    115.                      <span style="color:#999999;font-size:12px;">抠图/去水印/照片美化</span> </span> </span>
    116.                   </div>
    117.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    118.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;margin-top:40px;">
    119.                      <span style="width:140px;height:190px;display:block;">
    120.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    121.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i4/358606781/TB2OKqUcFXXXXaZXpXXXXXXXXXX_!!358606781.png" />
    122.                     </div>
    123.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">PSD转HTML <br />
    124.                      <span style="color:#999999;font-size:12px;">设计稿转网页HTML</span> </span> </span>
    125.                   </div>
    126.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    127.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;margin-top:40px;">
    128.                      <span style="width:140px;height:190px;display:block;">
    129.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    130.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i4/358606781/TB2XujXcFXXXXXsXXXXXXXXXXXX_!!358606781.png" />
    131.                     </div>
    132.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">店铺克隆 <br />
    133.                      <span style="color:#999999;font-size:12px;">百分百克隆别家的店铺</span> </span> </span>
    134.                   </div>
    135.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    136.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;margin-top:40px;">
    137.                      <span style="width:140px;height:190px;display:block;">
    138.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    139.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i3/358606781/TB2SCe8cFXXXXXrXXXXXXXXXXXX_!!358606781.png" />
    140.                     </div>
    141.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">装修顾问 <br />
    142.                      <span style="color:#999999;font-size:12px;">淘宝天猫装修专家</span> </span> </span>
    143.                   </div>
    144.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    145.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;margin-top:40px;">
    146.                      <span style="width:140px;height:190px;display:block;">
    147.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    148.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i3/358606781/TB2G7W6cFXXXXXWXXXXXXXXXXXX_!!358606781.png" />
    149.                     </div>
    150.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">LOGO设计<br />
    151.                      <span style="color:#999999;font-size:12px;">独家定制LOGO</span> </span> </span>
    152.                   </div>
    153.                   </a> <a  title="首页设计/QQ56481349" target="_blank">
    154.                   <div style="width:140px;height:190px;float:left;text-align:center;margin-left:24px;margin-top:40px;">
    155.                      <span style="width:140px;height:190px;display:block;">
    156.                     <div style="height:140px;width:140px;margin-bottom:13px;">
    157.                        <img class="dawei_360" src="//gdp.alicdn.com/imgextra/i1/358606781/TB2egPacFXXXXXnXXXXXXXXXXXX_!!358606781.png" />
    158.                     </div>
    159.                      <span style="line-height:24px;font-family:微软雅黑;font-size:24px;color:#33495F;">手机详情页 <br />
    160.                      <span style="color:#999999;font-size:12px;">优化手机端详情页</span> </span> </span>
    161.                   </div>
    162.                   </a>
    163.                 </ul>
    164.               </div>
    165.             </div>
    166.           </div>
    167.         </div>
    168.       </div>
    169.     </ul>
    170.   </div>
    171. </div>


    评分

    参与人数 2美工币 +21 收起 理由
    snrtmnmnyk + 1 感谢分享!
    都是月亮惹的祸 + 20 很给力!

    查看全部评分

  • TA的每日心情
    臭美
    2016-6-2 11:53
  • 签到天数: 145 天

    连续签到: 1 天

    [LV.7]炉火纯青

    6

    主题

    171

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27657

    QQ
    发表于 2015-7-3 09:46:23 | 显示全部楼层
    拿走了 楼主
  • TA的每日心情
    无奈
    2015-8-10 12:11
  • 签到天数: 44 天

    连续签到: 1 天

    [LV.5]略有小成

    5

    主题

    123

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51825

    发表于 2015-7-3 09:50:42 | 显示全部楼层
    CSS放在哪个位置啊

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-7-3 09:51:08 | 显示全部楼层
    不能用CSS
  • TA的每日心情
    臭美
    2016-8-26 21:16
  • 签到天数: 93 天

    连续签到: 1 天

    [LV.6]渐入佳境

    5

    主题

    252

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29554

    最佳新人热心会员

    发表于 2015-7-3 11:13:09 | 显示全部楼层
    不错不错,不过要破解CSS才能用
    啊!烦死,搬家真的好烦
  • TA的每日心情
    思考
    前天 12:55
  • 签到天数: 208 天

    连续签到: 1 天

    [LV.7]炉火纯青

    4

    主题

    704

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    19749

    最佳新人热心会员

    发表于 2015-7-3 11:18:45 | 显示全部楼层
    小白不造怎么用
    我可以划船不用浆,我可以扬帆没有风向,因为我这一生,全靠浪o(∩_∩)o
  • TA的每日心情
    思考
    2016-9-11 15:54
  • 签到天数: 206 天

    连续签到: 1 天

    [LV.7]炉火纯青

    24

    主题

    1028

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    32979

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2015-7-3 11:57:58 | 显示全部楼层
    好贴!顶顶顶!
    即使睁开眼睛也看不见,我的心在黑暗中——林疋火昱
  • TA的每日心情
    臭美
    2016-5-14 09:27
  • 签到天数: 48 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    692

    帖子

    9246

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    9246

    热心会员灌水之王最佳新人

    QQ
    发表于 2015-7-3 12:13:14 | 显示全部楼层
    路过                        
    在一片苍茫的马勒戈壁上,生活着一群快乐滴草泥马。
  • TA的每日心情
    抱抱
    2016-10-14 17:55
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    585

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23826

    发表于 2015-7-4 09:12:48 | 显示全部楼层
    模块那个咪出来后,这些效果都没怎么人去研究了
    楼主也破了头吧
    底调玩就是了
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-11 18:07 , Processed in 0.138400 second(s), 29 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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