前言:这是篇CSS3中关于3D效果与动画相关的内容。

(1)在CSS3的3D效果中,需要结合透视perspective的属性才能看到3d的效果,这个属性在屏幕上实现了元素近大远小的效果,所以要使用CSS3的3d相关属性,需要记得写perspective。

(2)在CSS3的3d坐标系与数学中的坐标系有所区别,主要是在y轴正方向的规定上。

  • x轴正方向:从左往右
  • y轴正方向:从上至下
  • z轴正方向:从里至外

旋转

在C3的2D变换中,rotate代表了元素围绕Z轴旋转一个角度,3d中还有围绕X和Y轴旋转。

1.rotateX:值 单位:deg

让元素围绕着X轴进行旋转

  • 人眼正视X轴正方向,正值是顺时针方向,负值时逆时针方向。
  • 没有透视的3D是看不出来方向
  • 加perspective后看到的效果就是正值元素向屏幕里倒,负值向屏幕外倒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 600px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transform: rotateX(45deg);
transition: all ease .5s;
}
.box:hover{
transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

2.rotateY:值

围绕着Y轴进行旋转

  • 正数是逆时针 (站在右边推门),负数是顺时针(站在左边推门)
  • 人眼正视y轴正方向,正值是顺时针方向,负值时逆时针方向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 600px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transform: rotateY(45deg);
transition: all ease .5s;
}
.box:hover{
transform: rotateY(-45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

3.rotate3d(x,y,z,deg);

rotate3d将rotateX,rotateY,rotateZ3个属性结合起来写,它的参数值x、y、z表示了旋转的3个方向,取值是0~1,deg表示了旋转的角度。(这个属性的具体用法目前不太会使用,使用时经常不能出现预期结果,可能使用方式不对,以后研究。)

平移

在2d变换中translateX和translateY,代表沿X轴和Y轴平移,3d中还有translateZ,沿Z轴平移。

translateZ

就是在Z轴上来回移动,但是如果没有透视的情况下,完全看不出效果,所以,一般transform:translateZ()都是配合透视一起使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 900px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 2s;
}
.current{
/*transform: rotateX(360deg) translateZ(500px);*/
transform:translateZ(500px) rotateX(360deg);
}
</style>
</head>
<body>
<div class="box"></div>
<button>点我呀</button>
<script type="text/javascript">
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.onclick = function(){
box.classList.add('current');
}
</script>
</body>
</html>

其它:translateZ和rotate结合会产生不一样的3D效果,不同的顺序的效果截然不同,如果先rotate 在translateZ 元素是在空间里面发生旋转 而如果是translateZ在rotate 元素是在直线上发生旋转。

其它3D相关属性

1.透视:perspective:值

距离屏幕的多远看元素,实现近大远小的效果。

说明:透视值越小,透视效果越强,值越大,透视效果越弱,透视添加在父级身上

2.透视点 perspective-origin:值

最后看看到透视消失的地方,值可以是像素,也可以是百分比,还可以是方位名词,默认值是50%,50%(中心点)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 155px;
height: 220px;
border: 1px solid #000;
margin: 100px auto;
/* 说明:透视值越小,透视效果越强,值越大,透视效果越弱,透视添加在父级身上 */
perspective: 1px;
perspective-origin: 50% 50%;
}
img{
transition: all 1s;
transform-origin: bottom;
}
.box:hover img{
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="box">
<img src="data:image/shu.jpg" alt="">
</div>
</body>
</html>

3.transform-style

规定被嵌套元素如何在3D空间中显示:flat是默认值,让子元素不保留其3D位置, preserve-3d 让子元素保留其3D位置 ,加在父亲身上.

小总结:透视 灭点 transform-style都是添加在父级身上,当元素发生3D翻转的时候,整个坐标系也跟着发生了翻转。

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
perspective: 900px;
}
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
perspective: 900px;
transform: rotateY(70deg);
transform-style: preserve-3d;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
margin: 50px auto;
transform: rotateX(45deg);
transform-origin: top;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

动画 animation:值

animation属性有8个参数值:

  1. animation-name:自定义动画名
  2. animation-duration:动画的持续时间 单位是s或者ms
  3. animation-timing-function:动画的曲线
  4. animation-delay:动画从何时开始
  5. animation-iteration-count:控制动画执行的次数 没有单位, 一直执行:infinite
  6. aniamtion-direction:控制动画是否逆序播放 默认值normal 逆序:alternate
  7. animation-play-state:控制动画的播放和暂停 默认值是播放:running 暂停:paused
  8. animation-fill-mode:动画最后的停留位置 forwards 让动画停留在最后一帧

动画一定要先写animation 然后搭配@keyframes去写自定义的动画。 注意:animation和@keyframes最好都添加私有前缀。 示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
background-color: pink;
/* -webkit-animation: feifei 2s linear 0s;
-moz-animation: feifei 2s linear 0s;
-ms-animation: feifei 2s linear 0s;
-o-animation: feifei 2s linear 0s; */
animation: feifei 2s linear 0s;
}
/* 单组动画 */
@keyframes feifei{
from{
width: 200px;
height: 200px;
transform: rotate(0deg);
}
to{
width: 400px;
height: 400px;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

如果使用@keyframes规定了多组动画规则,animation也可以同时添加这些组动画,之间只需要用‘,’隔开即可。

CSS3学习总结3-3D与动画的更多相关文章

  1. css3学习总结8--CSS3 3D转换

    3D 转换 1. rotateX() 2. rotateY() otateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...

  2. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  3. CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  4. css3之3D魔方动画(小白版)

      在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图 第一步非常简单,就是先将魔方的结构画出来.大家都玩过魔方,知道魔方是一个有六个面的正方体.这里我们先写一个大的di ...

  5. CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  6. CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

      目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...

  7. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  8. 【CSS3】3D立方体动画

    关于CSS3的3D立方体动画 知识点: 1.每个元素有独立的坐标系 2.坐标系随当前元素的改变而发生改变 3.立方体由静态transform参数构成 4.通过给容器添加动画使立方体运动 效果图: &l ...

  9. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  10. css3学习文档

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

随机推荐

  1. PD PDM模型中关系设置为概念模型样式

      来自为知笔记(Wiz)

  2. 利用注解来保存uri

    一直对getRequestURI()与getRequestURL()理解不透彻,因此今天通过查找资料,现将些许收获分享一下: [非原创]代码搬运工..(*^__^*) 1.request.getSch ...

  3. maven-javaServlet-文件上传

    十月 25, 2016 5:00:39 下午 org.apache.catalina.core.AprLifecycleListener init信息: The APR based Apache To ...

  4. [深度学习大讲堂]从NNVM看2016年深度学习框架发展趋势

    本文为微信公众号[深度学习大讲堂]特约稿,转载请注明出处 虚拟框架杀入 从发现问题到解决问题 半年前的这时候,暑假,我在SIAT MMLAB实习. 看着同事一会儿跑Torch,一会儿跑MXNet,一会 ...

  5. 阿里云ECS(Centos)开启X11的步骤

    阿里云ECS(Centos)开启X11的步骤 1.修改sshd_config X11Forwarding yes 2.yum -y install xorg-x11-xauth xorg-x11-ut ...

  6. MVC4 项目迁移 服务器被配置为不列出此目录的内容

    前言: 将服务器中已经发布在IIS7上的网站,迁移到虚拟机中. 方便以后出现问题了,可以在自己的虚拟机中做测试提高工作效率. 问题: 迁移的6个MVC项目中有俩个碰到如下问题. 应用程序"T ...

  7. xcode 版本控制推送代码到远程git仓库的步骤

    一 代码推送到远程git仓库 1.在git中建立一个下项目(假设项目名称为->Mygit) 2.在xocde上新建一个测试项目(假设项目名称为GitTest) 3.打开电脑终端: 1)首先利用终 ...

  8. cocospods 最新安装教程

    Terminator 终端原来 安装 cocoa pods  终端命令 :sudo gem install cocoapods  #已经无效系统更新后的 cocoa pods 终端命令 : sudo ...

  9. dell笔记本三个系统,ubuntu16.04更新,boot分区容量不足解决办法

    本人自己dell物理机上安装windows 7 .centos 1704 和ubuntu1604 三个系统的,分区当时没有使用lVM,boot单独挂/dev/sda7 分区,只有200M,随着2次li ...

  10. git使用手册

    1.git常用命令 >>首先做git clone 形成本地repository: >>然后做checkout形成分支 列出所有分支  $ git branch –r 切换到新分 ...