CSS3 3D制作实战案例分析
|
副标题[/!--empirenews.page--]
一、前言
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div div img{ width:300px; height:300px; position:absolute; /* -webkit-transition: all 0.8s; */ } div div{ -webkit-transition: all 1s; } #img1{ -webkit-transform: translateZ(150px); /* -webkit-transition: all 0.8s; */ } #img2{ -webkit-transform: rotateX(-90deg) translateZ(150px); /* -webkit-transition: all 0.8s; */ } #img3{ -webkit-transform: rotateZ(180deg) translateZ(-150px); } #img4{ -webkit-transform: rotateX(90deg) translateZ(150px); } #img5{ -webkit-transform:rotateY(90deg) translateZ(150px); } #img6{ -webkit-transform: rotateY(-90deg) translateZ(150px); } /* div div:hover{ -webkit-transform: rotateX(270deg); } */ </style> </head> <body> （编辑：好传媒网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
