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>

时间: 2024-10-07 05:25:17

2D特效和3D特效的相关文章

Cocos2d-x学习笔记(十二)3D特效

特效类即是GridAction类,其实就是基于网格的3D动作类.需开启OpenGL的深度缓冲,否则容易3D失真. 下边是一个snippet,创建网格对象,并将其添加到当前layer:同时,将进行3D特效的对象,添加到网格对象上. gridNodeTarget = NodeGrid::create(); addChild(gridNodeTarget);// add to current layer auto bg = Sprite::create("background.png");

Mask裁切UI粒子特效或者3D模型

刚好前几天有人问我这个问题,再加上新项目也可能用,所以这两天就研究了一下.其实如果粒子特效 和3D模型 都用RenderTexture来做的话就不会有裁切的问题,但是粒子特效用RenderTexture来做会有显示的问题,所以还是得用摄像机.废话不多说了,进入正题. 原理就是把Mask的裁切区域传给粒子特效Shader,当超出这个区域那么直接让它完全透明即可.粒子特效的源生shader大家可以去unity官网下载,我在这里把需要修改的地方标注给大家. //add 注释中的内容就是我做修改的地方.

腾讯QQ空间穿越时光轴3D特效

<DOCTYPE html> <html> <head> <title>腾讯QQ空间穿越光轴3D特效</title> <style> *{margin:0;padding:0;} body{ background-image:url("images/bg.png") fixed;//拖动鼠标图片不会上下移动 height:2000px; } .con{ width:1000px; /*heigth:500px;*/

二.ubuntu14.04 3D特效设置

一.如果按照第一篇都设置好了(显卡驱动等都已经正常),然后 1.安装CCSM设置管理器 用鼠标点击屏幕左侧Unity程序启动栏中的“Ubuntu软件中心”(有“A”字形的公文包图标), 在弹出的“Ubuntu 软件中心”窗口右上角的搜索栏中,输入“compiz”, 可以看到,默认的“Compiz”这个软件已经安装在系统上了,3D桌面就是由这个软件来运行才能实现的. 现在需要做的只是安装用户配置和调节各种特效的软件,点击选中“CompziConfig设置管理器”(简称CCSM), 点击右边的“安装

2.CCGridAction(3D效果),3D反转特效,凸透镜特效,液体特效,3D翻页特效,水波纹特效,3D晃动的特效,扭曲旋转特效,波动特效,3D波动特效

 1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(ccp(winSize.width/2,winSize.height/2)); addChild(spr); //GridAction //CCFlipX3D * action = CCFlipX3D::create(2); //CCFlipY3D * action = CCFlipY3D::create(2);

WPF特效-实现3D足球效果

原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下: ?每个面加载不同贴图. <UserControl x:Class="MediaBalll.Model3Ds.BuckyBall"? ? ? ? ? ? ?xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"? ? ? ? ? ? ?xmlns:x="http://schemas.microsoft

推荐5个应用 jQuery 特效的精美特效

1.jQuery歌词同步的音乐播放器插件 精巧实用 之前我们分享过很多音乐播放器和视频播放器,很多播放器的UI界面都非常酷,特别是利用HTML5和CSS3实现的一些动画特效.今天要分享的一款基于jQuery的音乐播放器,它的特点是歌词和音乐可以同步播放,而且播放器整体非常精巧,适当修改可以作为你博客的播放器挂件. 在线演示 源码下载 2.jQuery美化版下拉框 开放API接口 这是一款很实用的jQuery下拉框美化插件,它的外观并不是很炫酷,但是跟浏览器自带的下拉选择框相比却要精美不少,而且自

WP8.1 UI 编程 六、变换特效和三维特效

1. 变换特效 变换原理:是二维变换矩阵 M11 M12 0 M21 M22 0 OffsetX OffsetY  1 WP只支持仿射变换,因此矩阵右边是0.0.1. (x,y,1)乘矩阵得到(x1,y1,1),新坐标为(x1,y1). 即:坐标(x,y)经矩阵变换后,新坐标为(x*M11 + y*M21 + OffsetX,x*M12 + y*M22 + OffsetY). WP提供了很多Transform类以变换对象,只需应用到UIElement的RenderTransform属性即可. 列

Css3之高级-5 Css转换(简介、2D转换、3D转换)

一.转换简介 转换概述 - 转换是使元素改变形状.尺寸和位置的一种效果 - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化,改变其形状.尺寸和位置 - 3D 转换:元素还可以在 Z 轴上发生变化 转换属性 - transform 属性向元素应用 2D 或者 3D 转换 - 指定一组转换函数,取值 - transform: none/transform-function; - none - 默认值