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>
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
