通过纯css制作出3D旋转效果，以展示中国部分知名公司为例：
浏览器实现结果：
6个名片都具有两面，一面图片，一面文字，当鼠标放在图片上时，就会3D旋转成文字的一面。
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3D变形制作视频展示区</title><style>body{margin-top: 5em;text-align: center;color: 414142;background: rgb(246,241,232);background-image: -ms-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%),url("/file/s_jpg_857b081bjw1du3kveu19sj.jpg");background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("/file/s_jpg_857b081bjw1du3kveu19sj.jpg");background-image: radial-gradient( farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("/file/s_jpg_857b081bjw1du3kveu19sj.jpg");background-size: cover;}h1,em,#information{display: block;font-size: 25px;font-weight: normal;margin: 2em auto;}a{color: #414142;font-style: normal;text-decoration: none;font-size: 20px;}a:hover{text-decoration: underline;}#container{margin: 0 auto;width: 1024px;}.wrapper{display: inline-block;width: 310px;height: 100px;vertical-align: top;margin: 1em 1.5em 2em 0;cursor: pointer;position: relative;font-family: Tahoma,Arial;-webkit-perspective: 4000px;-moz-perspective: 4000px;-ms-perspective: 4000px;-o-perspective: 4000px;perspective: 4000px;}.item{height: 100px;height: 100px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: -webkit-transform .6s;-moz-transition: -moz-transform .6s;-ms-transition: -ms-transform .6s;-o-transition: -o-transform .6s;transition: transform .6s;}.item:hover{-webkit-transform: translateZ(-50px) rotateX(95deg);-moz-transform: translateZ(-50px) rotateX(95deg);-ms-transform: translateZ(-50px) rotateX(95deg);-o-transform: translateZ(-50px) rotateX(95deg);transform: translateZ(-50px) rotateX(95deg);}.item img {display: block;position: absolute;top: 0;border-radius: 3px;box-shadow: 0px 3px 8px rgba(0,0,0,0.3);-webkit-transform: translateZ(50px);-moz-transform: translateZ(50px);-ms-transform: translateZ(50px);-o-transform: translateZ(50px);transform: translateZ(50px);-webkit-transition: all .6s;-moz-transition: all .6s;-ms-transition: all .6s;-o-transition: all .6s;transition: all .6s;width: 310px; height: 100px;}.item .information {display: block;position: absolute;top: 0;height: 80px;width: 290px;text-align: left;border-radius: 15px;padding: 10px;font-size: 12px;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);box-shadow: none;background: rgb(236,241,244);background: -webkit-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);background: -ms-linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);-webkit-transform: rotateX(-90deg) translateZ(50px);-moz-transform: rotateX(-90deg) translateZ(50px);-ms-transform: rotateX(-90deg) translateZ(50px);-o-transform: rotateX(-90deg) translateZ(50px);transform: rotateX(-90deg) translateZ(50px);-webkit-transition: all .6s;-moz-transition: all .6s;-ms-transition: all .6s;-o-transition: all .6s;transition: all .6s;}.information strong {display: block;margin: .2em 0 .5em 0;font-size: 20px;font-family: "Oleo Script";}.item:hover img {box-shadow: none;border-radius: 15px;}.item:hover .information {box-shadow: 0px 3px 8px rgba(0,0,0,0.3);border-radius: 3px;}</style></head><body><div id="container"><h1>3D变形制作知名公司展示区</h1><div class="wrapper"><div class="item"><img src="/t0113f4c931a6e56e29.jpg"><span class="information"><strong>昌元化工</strong>昌元化工公司，是全世界最大的高锰酸钾生产商，年产量约4万吨，占据国内90%和国际55%的市场份额。</span></img></div></div><div class="wrapper"><div class="item"><img src="/t01193915845ce36a2f.jpg"><span class="information"><strong>巨石集团</strong>中国玻璃纤维产量是362万吨，占了全球的50%--60%的份额，巨石集团占了中国三分之一，。</span></img></div></div><div class="wrapper"><div class="item"><img src="/t01b6a5b2e45dda6745.jpg"><span class="information"><strong>大疆创新</strong>作为全球最大的消费级无人机厂商，大疆创新在至，销售额增长近100倍。大疆80%的销量来自于海外。</span></img></div></div><div class="wrapper"><div class="item"><img src="/t0100c15ad1811f98c7.jpg"><span class="information"><strong>中国华为</strong>华为的销售收入达到了5200亿人民币，同比增长32%，其中6成来自海外业务达到3200亿！</span></img></div></div><div class="wrapper"><div class="item"><img src="/t01db6e588779c1f3a4.jpg"><span class="information"><strong>国家电网</strong>年营收超过2万亿元人民币，位居世界所有公司第二位，净利润高达102亿美元，更掌握着智能电网，特高压电网技术的国际标准制定权。</span></img></div></div><div class="wrapper"><div class="item"><img src="https://p1./dr/270_500_/t01059dbb78b5e2eada.jpg?size=550x351" ><span class="information"><strong>阿里巴巴</strong>阿里巴巴网络技术有限公司是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立。</span></img></div></div></div></body></html>
