演示图
特效说明:
要玩转css3的3d,就必须了解几个词汇,便是透视( perspective )、旋转( rotate )和移动( translate )。 透视 即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。 旋转 则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转。 平移 同理。 (兼容测试:IE8及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法: 1、调用CSS样式:
<link rel="stylesheet" type="text/css" href="css/style.css" />
2、添加HTML代码:
![](https://i-blog.csdnimg.cn/blog_migrate/d99bf394b506b06f0a98716d97f7cd86.png)
特效说明:
要玩转css3的3d,就必须了解几个词汇,便是透视( perspective )、旋转( rotate )和移动( translate )。 透视 即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。 旋转 则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转。 平移 同理。 (兼容测试:IE8及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法: 1、调用CSS样式:
<link rel="stylesheet" type="text/css" href="css/style.css" />
2、添加HTML代码:
将<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。