css制作3D立体旋转效果

通过纯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("http://fs0.139js.com/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("http://fs0.139js.com/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("http://fs0.139js.com/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="http://p3.qhimg.com/t0113f4c931a6e56e29.jpg"><span class="information"><strong>昌元化工</strong>昌元化工公司，是全世界最大的高锰酸钾生产商，年产量约4万吨，占据国内90%和国际55%的市场份额。</span></img></div></div><div class="wrapper"><div class="item"><img src="http://p6.qhimg.com/t01193915845ce36a2f.jpg"><span class="information"><strong>巨石集团</strong>2016年中国玻璃纤维产量是362万吨，占了全球的50%--60%的份额，巨石集团占了中国三分之一，。</span></img></div></div><div class="wrapper"><div class="item"><img src="http://p5.qhimg.com/t01b6a5b2e45dda6745.jpg"><span class="information"><strong>大疆创新</strong>作为全球最大的消费级无人机厂商，大疆创新在2011年至2015年，销售额增长近100倍。大疆80%的销量来自于海外。</span></img></div></div><div class="wrapper"><div class="item"><img src="http://p3.qhimg.com/t0100c15ad1811f98c7.jpg"><span class="information"><strong>中国华为</strong>2016年华为的销售收入达到了5200亿人民币，同比增长32%，其中6成来自海外业务达到3200亿！</span></img></div></div><div class="wrapper"><div class="item"><img src="http://p8.qhimg.com/t01db6e588779c1f3a4.jpg"><span class="information"><strong>国家电网</strong>年营收超过2万亿元人民币，位居世界所有公司第二位，净利润高达102亿美元，更掌握着智能电网，特高压电网技术的国际标准制定权。</span></img></div></div><div class="wrapper"><div class="item"><img src="https://p1.ssl.qhimg.com/dr/270_500_/t01059dbb78b5e2eada.jpg?size=550x351" ><span class="information"><strong>阿里巴巴</strong>阿里巴巴网络技术有限公司是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立。</span></img></div></div></div>
</body>
</html>

css制作3D立体旋转效果相关推荐

html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
ai如何旋转画布_「AI教程」使用AI制作3D立体文字效果
今天macdown小编要通过AI制作一种3D立体字体,主要的知识点是混合工具的使用.Shift键.Alt键的灵活运用.3D旋转命令.投影效果的创建等,学会后可以应用在需要的设计中,比如海报设计,log ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
HTML+CSS制作3D步数统计界面
HTML+CSS制作3D步数统计界面效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
用计算机做出牙膏盒立体效果制作,使用Nuke进行2D转3D立体世界详解案例教程（二）：制作3D立体效果...
三.Nuke 3D Stereography Production 模型制作完成后,接下来可以将其导入Nuke,并开始制作3D立体效果. 3.1导入场景模型 ※步骤1 启动Nuke软件,新建一个项目文 ...
利用css制作3D照片墙
利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
python立体感的饼状图如何做_AI教程：如何制作3D立体饼状图表？
原标题:AI教程:如何制作3D立体饼状图表? 辛辛苦苦分析一堆大数据,竟然没人看!到底怎么办?俗话说,有图有真相,一图胜千言,取悦了眼球,剩下的都好说.如果你正着手于从数据中洞察出有用信息,那你所需要 ...
【我的前端】前端项目小练习：CSS创建3D圆柱旋转效果
前端项目小练习:CSS创建3D圆柱旋转效果文章目录前端项目小练习:CSS创建3D圆柱旋转效果 HTML标记样式化 CSS 3D 圆柱体动画圆柱体

css制作3D立体旋转效果

浏览器实现结果：

代码：

css制作3D立体旋转效果相关推荐

最新文章

热门文章