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特效的主要内容,如果未能解决你的问题,请参考以下文章

Cocos2d-x学习笔记(16)(常见22种特效)

cocos2d-x 一些3效果的类及创建參数

求教如何在Unity中为2D游戏制作技能特效

3.CCFadeOutTRTiles,部落格效果,跳动的方块特效,3D瓷砖晃动特效,破碎的3D瓷砖特效,瓷砖洗牌特效,分多行消失特效,分多列消失特效

Cocos2d-X中实现菜单特效

Part 9:Cocos2d-x开发基础-动作特效和动画-关东升-专题视频课程