index1到index4分为四个iframe标签引入的可单独分离的主页,相当于组件的原理,其中index作为主页,index1是首页全屏轮播图,其他都是单独的相册风格,也可单独使用。
index.html的iframe引入其他组件:
iframe一些基本属性说明:
| 属性 | 值 | 描述 |
|---|---|---|
| align | left right top middle bottom | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 |
| frameborder | 1 0 | HTML5 不支持。规定是否显示 |
| height | pixels | 规定 |
| longdesc | URL | HTML5 不支持。规定一个页面,该页面包含了有关 |
| marginheight | pixels | HTML5 不支持。规定 |
| marginwidth | pixels | HTML5 不支持。规定 |
| name | name | 规定 |
| sandbox | "" allow-forms allow-same-origin allow-scripts allow-top-navigation | 对 |
| scrolling | yes no auto | HTML5 不支持。规定是否在 |
| seamless | seamless | 规定 |
| src | URL | 规定在 |
| srcdoc | HTML_code | 规定页面中的 HTML 内容显示在 |
| width | pixels | 规定 |
轮播图效果:

菜单通过div+li+css定义实现动态切换效果,采用的是Bootstrap的样式,无需自己实现:

这里涉及几个关键的css样式属性
transform–style属性指定嵌套元素是怎样在三维空间中呈现。
注意: 使用此属性必须先使用 transform 属性.
语法:
transform-style: flat | preserve-3d;
| 值 | 描述 |
|---|---|
| flat | 表示所有子元素在2D平面呈现。 |
| preserve-3d | 表示所有子元素在3D空间中呈现。 |
Transform属性定义及使用说明:
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
语法:
transform: none|transform-functions;
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。


这里用到很多第三方的样式和js,html代码不多
切割的效果,根据鼠标焦点放大和变化


和index1一样
这里涉及几个关键的css样式属性:
transform-style: preserve-3d
transform: rotateY(180deg)