关闭

3D转换加上透视效果

标签: html5css3
116人阅读 评论(0) 收藏 举报
分类:

CSS3的3D转换加上透视效果。

截图:



代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3D转换练习</title>
<style type="text/css">
div{
width: 120px;
height: 120px;
border: solid 1px #000;
margin: 50px auto;
perspective: 400px;/*透视的效果,必须给父元素加*/
}
/*图片3D变化*/
div:hover img{
transform: rotateX(60deg);/*X轴旋转60度*/
transition: all 0.5s;
}
#table1{
width: 300px;
height: 300px;
margin: 30px auto;
background-color: black;
perspective: 500px;/*透视的效果,必须给父元素加*/
}
table{
margin: 30px auto;
}
/*图片3D变化*/
#table1:hover table{
transform: rotateX(40deg);/*X轴旋转60度*/
transition: all 0.5s;
}
</style>
</head>


<body>
<div><img src="images\userHead.jpg"></div>
<div id="table1">
<table width="300" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11782次
    • 积分:730
    • 等级:
    • 排名:千里之外
    • 原创:63篇
    • 转载:6篇
    • 译文:0篇
    • 评论:0条
    文章分类