2D特效和3D特效
Posted 黑默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2D特效和3D特效相关的知识，希望对你有一定的参考价值。
2D居中效果
div{
width:
height:
backgroundcolor:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
} 将DIV绝对定位后，使用transform（使改变，使移动）将其移动。
2D旋转效果
div:hover{
transform:rotate(45deg)
} 当鼠标放到DIV上，这个DIV旋转45度角。
中心在左上角加一句代码在div中：
Transform-origin:top left;
2D缩放效果
div:hover{
transform:scale(50%)}鼠标移是移上缩放一半的效果
若只缩放X轴，transform:scaleX(0.5)
2D斜切效果
div:hover{
transform:skewx(45deg)
} 沿着X轴斜切45度角
2D过渡型
transition: all 0.5s 宽高在鼠标放上后都变化,用了0.5秒
transition:width 0.5s ease 2s 宽度在两秒后变化，变化过程0.5秒
div{
原始div
transition:width 0.5s ease 2s
}
div:hover{
变化后的样子
}
transition: all 0.5s 宽高在鼠标放上后都变化,用了0.5秒
transition:width 0.5 ease 2s 宽度在两秒后变化，变化过程0.5秒
头像旋转
img{
border:1px solid red;
display:block;
margin:50px auto;
border-radius:50%
transform:all 0.5s}
img:hover{
transform:rotate(360deg)
}
3D特效
1，沿着X轴旋转,perspective:往Z轴400像素45度
div{
DIV
perspective:400px;
}
img:hover{
transform:rotateX(45deg)
}
打开的盒子
<style type="text/css">
#tu{
width:300px;
height:260px;
margin:100px auto;
position:relative;
}
#tu1,#tu2{
width:300px;
height:260px;
background:url(photo/haha01.jpg) ;
border:1px black solid;
border-radius:50%;
position:absolute;
top:0px;
left:0px;
}
#tu2{
background:url(photo/haha04.jpg) ;
transition:all 2s;
transform-origin:bottom
}
#tu:hover #tu2{
transform:rotateX(180deg);
}
<body>
<div id="tu">
<div id="tu1"></div>
<div id="tu2"></div>
</div>
</body>
以上是关于2D特效和3D特效的主要内容，如果未能解决你的问题，请参考以下文章
3.CCFadeOutTRTiles，部落格效果，跳动的方块特效，3D瓷砖晃动特效，破碎的3D瓷砖特效，瓷砖洗牌特效，分多行消失特效，分多列消失特效