您的位置：首页 > Web前端 > CSS

CSS3-2D及3D效果以及过渡

2017-01-21 02:07 405 查看

CSS转动

2D效果概念：

通过 CSS3 中的属性，我们能够对元素进行移动、缩放、转动、拉长或拉伸。实现2D或3D效果。

使用transform属性来实现，该属性的值是几个函数。

主要2d转换函数：

1.translate(x,y) 或者 translateX(n) 或者 translateY(n) 平移

2.rotate(10deg) 旋转，2d旋转

3.scale(x,y)或者scaleX(n) 或者scaleY(n) 按比例放大缩小,包括边框

4.skew(x,y)或者 skewX(n)或者 skewY(n) 根据给定的水平线（X 轴）和垂直线（Y 轴）参数转动

3D效果概念:

translate3d(x,y,z)定义3D平移，translateX(x)定义3D x轴平移，translateY(y)定义3Dy轴平移，translateZ(z)定义3D z轴平移，值为数值

scale3d(x,y,z)定义3D缩放，scaleX(x)缩放 x轴，scaleY(y)缩放 y轴，scaleZ(z)缩放 z轴

rotate3d(x,y,z,angle)定义3D旋转，rotateX(angle)定义 x轴的旋转，rotateY(angle)定义

y轴的旋转，rotateZ(angle)定义 z轴的旋转，其中rotate(x,y,z,angle)官方是这样解释的，这里的x,y,z的取值是0或1，0表示不转动，1表示转动。angle表示转动多少度。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box1{width: 100px;height: 100px;background-color: #18C112;transform: rotate3d(0,1,0,30deg)}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

transform向元素应用2D或3D转换，下面涉及几个重要属性:

transfrom-origin允许你改变被转换元素的起点，2d旋转的起点，可以是具体值,分为x轴，y轴，也可以是代表值（center,left,right,top）

transform-style规定被嵌套元素如何在3D空间中显示

flat子元素将不保留其3D位置

preserve-3d子元素将保留其3D位置

perspective视距

perspective-origin视距的起点

backface-visibility当元素背面面对屏幕是否可见。

visible

hidden

作用：通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡

缩写格式：

transition:property duration timing-function delay;

transition简写属性，用于在一个属性中设置四个过渡属性

transition-property规定应用过渡的CSS属性的名称

transition-duration定义过渡效果花费时间，默认是0

transition-timing-function规定过渡效果的时间曲线，默认是ease

transition-delay规定过渡效果何时开始，默认是0

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box1{width: 100px;height: 100px;background-color: #BA0F12;transition: width 1s ease 0s,background-color 1s ease 0s,height 1s ease 0s}
.box1:hover{width: 200px;height: 200px;background-color: #00F93B;}
</style>
</head>

<body>
<div class="box1"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航