当前位置: 首页 » 笔记 » css3 实现正反面 左右翻转效果

css3 实现正反面 左右翻转效果

haibao 笔记 2018-05-29 18:13:07 522 百度已收录
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

晚上好, 本文除去代码部分,共3637个字,预计阅读时间需要10分钟。

本篇记录一下之前在项目中用的这个css3左右翻转效果,应用场景应该蛮多的,仅供参考~

效果如下:

上面贴的是第三方的jsfiddle,如果加载过慢,复制以下代码放入自己的HTML中预览,这里就不放demo预览的地址了~

以下贴一下主要代码:

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<ul class="clearfix wrap classify-detail">
  <li>
    <div class="flipper pr">
      <div class="major-front">
        <a href="#" class="major-pic"><img width="100%" src="http://via.placeholder.com/320x164" alt=""></a>
        <div class="major-infos">
          <a href="#" class="major-name ellipsis">智能网联汽车研发工程师(2期)</a>
          <p class="major-slogan ellipsis">硅谷大咖,教你掌握未来驾驶技术</p>
          <p class="major-suit ellipsis">适合对象:自动化类、汽车类等相关专业的…</p>
          <p class="major-date ellipsis">学习时长:4个月</p>
        </div>
      </div>
      <div class="major-back">
        <span class="major-name-">新能源汽车电子电器架构工程师</span>
        <p class="major-desc">智能网联汽车的到来预示着工业技术、交通效率、出行方式的重大改变,人才需求成为这个风口上最关键的环节。本课程针对智能网联汽车电子控制系统工程师,围绕其工作岗位中的应用场景开发案例,由众多资深专家学者和一线研发工程师带领你掌握</p>
        <p class="tr"><a href="javascript:;"><i class="iconfont icon-enter"></i></a></p>
      </div>
    </div>
  </li>
  <li>
    <div class="flipper pr">
      <div class="major-front">
        <a href="#" class="major-pic"><img width="100%" src="http://via.placeholder.com/320x164" alt=""></a>
        <div class="major-infos">
          <a href="#" class="major-name ellipsis">智能网联汽车研发工程师(2期)</a>
          <p class="major-slogan ellipsis">硅谷大咖,教你掌握未来驾驶技术</p>
          <p class="major-suit ellipsis">适合对象:自动化类、汽车类等相关专业的…</p>
          <p class="major-date ellipsis">学习时长:4个月</p>
        </div>
      </div>
      <div class="major-back">
        <span class="major-name-">新能源汽车电子电器架构工程师</span>
        <p class="major-desc">智能网联汽车的到来预示着工业技术、交通效率、出行方式的重大改变,人才需求成为这个风口上最关键的环节。本课程针对智能网联汽车电子控制系统工程师,围绕其工作岗位中的应用场景开发案例,由众多资深专家学者和一线研发工程师带领你掌握</p>
        <p class="tr"><a href="javascript:;"><i class="iconfont icon-enter"></i></a></p>
      </div>
    </div>
  </li>
  <li>
    <div class="flipper pr">
      <div class="major-front">
        <a href="#" class="major-pic"><img width="100%" src="http://via.placeholder.com/320x164" alt=""></a>
        <div class="major-infos">
          <a href="#" class="major-name ellipsis">智能网联汽车研发工程师(2期)</a>
          <p class="major-slogan ellipsis">硅谷大咖,教你掌握未来驾驶技术</p>
          <p class="major-suit ellipsis">适合对象:自动化类、汽车类等相关专业的…</p>
          <p class="major-date ellipsis">学习时长:4个月</p>
        </div>
      </div>
      <div class="major-back">
        <span class="major-name-">新能源汽车电子电器架构工程师</span>
        <p class="major-desc">智能网联汽车的到来预示着工业技术、交通效率、出行方式的重大改变,人才需求成为这个风口上最关键的环节。本课程针对智能网联汽车电子控制系统工程师,围绕其工作岗位中的应用场景开发案例,由众多资深专家学者和一线研发工程师带领你掌握</p>
        <p class="tr"><a href="javascript:;"><i class="iconfont icon-enter"></i></a></p>
      </div>
    </div>
  </li>
</ul>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* 重置样式 */
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "microsoft yahei", Helvetica, Arial, sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
ol,ul{list-style:none}
a{text-decoration:none}
a:hover{text-decoration:underline}
 
.clearfix{zoom: 1;}
.clearfix:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
 
.wrap{width: 1000px;margin: 0 auto;}
.fl{float: left;}
.pr{position: relative;}
.tr{text-align: right;}
.ellipsis{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 /* 以下用于修复兼容问题:ff、safari 下会字体底部横向会被截短 */
/* @-moz-document url-prefix() { .ellipsis{line-height: 1.4;} } */
@-moz-document url-prefix() { .ellipsis{line-height: inherit;} }
 
/* 列表样式 */
.classify-detail{padding: 30px 0;background-color: #EDEFF2;}
.classify-detail li{width: 320px;height: 320px;margin: 0 20px 34px 0;border-radius: 4px;float: left;}
.classify-detail li:nth-child(3n){margin-right: 0;}
.classify-detail .major-pic{height: 164px;display: block;}
.classify-detail .major-pic img{border-top-left-radius: 4px;border-top-right-radius: 4px;}
.classify-detail .major-infos{padding: 20px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;}
.classify-detail .major-name{color: #333;font-size: 18px;}
.classify-detail .major-slogan{color: #333;font-size: 14px;line-height: 40px;margin-bottom: 20px;}
.classify-detail .major-suit, .classify-detail .major-date{font-size: 12px;color: #999;}
.classify-detail .major-name-{display: block;padding: 40px 40px 20px;color: #fff;font-size: 18px;}
.classify-detail .major-desc{width: 240px;height: 145px;overflow: hidden;margin: 0 auto;color: #fff;font-size: 14px;line-height: 21px;}
.classify-detail .major-back i{color: #fff;font-size: 24px;margin-right: 24px;}
 
.major-front, .major-back{-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; width: 100%; height: 320px; position: absolute; top: 0; left: 0; border-radius: 4px; box-shadow:2px 4px 4px rgba(55,54,63,0.2);}
.major-front{background-color: #fff;}
.major-back{background-color: #A07DBD; -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}
.classify-detail li:hover .flipper .major-front{-ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}
.classify-detail li:hover .flipper .major-back{-ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}

主要就是把div分2层,一层是正面的内容,另一层是反面的内容,然后加上perspective透视,背面不可见,transformrotate翻转即可。

本篇完~

本文标题:css3 实现正反面 左右翻转效果

本文地址:http://www.hehaibao.com/css3-flip-animation/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注