首页 > 代码库 > CSS3系列之3D制作 再研究
CSS3系列之3D制作 再研究
水平翻转效果：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .stage { width: 140px; height: 200px; perspective: 800px; } .container { position: relative; width: 140px; height: 200px; transform-style: preserve-3d; transition: 1s; } .front { position: absolute; width: 140px; height: 200px; background-image: url(img/3tb_160824110159262h572240.jpg); background-size: cover; backface-visibility: hidden; } .back { position: absolute; width: 140px; height: 200px; background-image: url(img/3tb_160824110159xh65572240.jpg); background-size: cover; transform: rotateY(180deg); backface-visibility: hidden; } .stage:hover .container { transform: rotateY(180deg); } </style> </head> <body> <div class=‘stage‘> <div class=‘container‘> <div class=‘front‘></div> <div class=‘back‘></div> </div> </div> </body></html>3D 旋转：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .wrap { padding: 50px; } .stage { width: 100px; height: 100px; -webkit-perspective: 2000px; perspective: 2000px; list-style: none; } .container { position: relative; width: 100px; height: 100px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 1s; transition: 1s; } .front { position: absolute; width: 100px; height: 100px; -webkit-transform: translateZ(50px); transform: translateZ(50px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .front img { width: 100%; height: 100%; } .back { position: absolute; display: block; width: 100px; height: 100px; text-align: center; line-height: 100px; -webkit-transform: rotateY(90deg) translateZ(50px); transform: rotateY(90deg) translateZ(50px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } li:nth-child(1) .back { background-color: skyblue; } li:nth-child(2) .back { background-color: pink; } li:nth-child(3) .back { background-color: lightyellow; } .container:hover { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } </style> </head> <body> <ul class="wrap"> <li class="stage"> <div class=‘container‘> <div class="front"><img src="http://d3.freep.cn/3tb_160824132644ihf4572240.jpg" /></div> <p class="back">帅气的胡歌</p> </div> </li> <li class="stage"> <div class=‘container‘> <div class="front"><img src="http://d2.freep.cn/3tb_160824132644w0r4572240.jpg" /></div> <p class="back">美腻的赵丽颖</p> </div> </li> <li class="stage"> <div class=‘container‘> <div class="front"><img src="http://d3.freep.cn/3tb_160824235542tkj9572240.jpg" /></div> <p class="back">清纯的刘亦菲</p> </div> </li> </ul> </body></html>
CSS3系列之3D制作 再研究
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。