css3 3D转换以及动画效果

css3 3D转换以及动画效果

不要给我说什么底层原理、框架内核！老夫敲代码就是一把梭！复制！粘贴！拿起键盘就是干！

哈哈O(∩_∩)O 通过一个小小的demo学会css3新特性，实在不行那就复制粘贴把。

首先在了解3D效果之前必须先知道2D的的属性，因为3D效果是在二维变换的基础上增加了Z轴从而达到3D效果。

transform

transform：有4个常用的方法

1. translate()
   通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）
2. rotate()
   通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
3. scale()
   通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）
4. skew()
   通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）

重点讲下其中的translate()和rotate()也实现上面效果需要用到的

• translate()语法

div {
	transform: translate(50px,100px);
}

意为从原来位置上向左和向下位移50px，100px

• rotate()语法

div {
 	transform: rotate(45deg);
}

意为把元素顺时针旋转 45 度，如下图 红色 rotate(45deg)

ok讲完了 直接跳到3D部分

何为3D?

3D互联网，也被成为（3dweb）它是一种立体的三维展示技术，是以计算机绘图技术，在Web浏览器上展现3D的对象，是通过在浏览器中内嵌3D虚拟场景的手段，在保证3D立体效果的同时，有效的降低对网络和硬件的要求，让互联网用户能够快速的体验3D带来的真实感受，并可让使用者直接操控，作出如旋转、移动、放大缩小等动作。

实现3D效果需要用到rotate3d(x,y,z,angle)，也可以写作rotateX(angle)，rotateY(angle)，rotateZ(angle)分开定义XYZ的旋转方向。2D的旋转已经看过了接下来看看3D的旋转效果

首先父级元素添加声明3d的样式

div {
	perspective: 800px；
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
}

• rotateX(angle)

div {
transform: rotateX(66deg);
}

rotateY(angle)

div {
transform: rotateY(66deg);
}

• rotateZ(angle)

div {
}

怎么样是不是觉得上面三张图片刚好就是组成一个矩形的个个面板呢，接下来只需要把所有元素都定位到一起然后分开设置每个面板的rotate3D()属性就行啦。

最后简单说下动画效果怎么实现

首先声明一个动画

@keyframes

通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。

• keyframes name{}；

@keyframes three_dimensional{ 0% { transform:rotateY(0deg); perspective-origin: 50% 50%; } 50% { -webkit-transform:rotateY(-360deg); } 75% { -webkit-transform:rotateX(-180deg); } 100% { -webkit-transform:rotateX(-360deg); } }

本次案例的代码如上，让后通过animation把name加到样式里

div {
	animation: three_dimensional 20s linear infinite;
}

哈哈这就可以了哇！

我是Singh，希望这篇文章能对你有帮助