PHP网站开发案例12源代码做网站的升级人

前言：transform-origin 用于设置动画的基点（中心点），适用于所有的块级元素以及某些内联元素。
必须配合transform使用，默认情况下，元素的动作参考点为元素盒子的中心。***注意：transform-origin只能在使用了transform后才奏效。语法：transform-origin: x-axis y-axis z-axis;transform-origin的属性值可以是百分比，em，px等具体的值，也可以是top,right,left,center这样的关键词。* 以下关键字等同于百分比值left，center，right 是水平方向的取值，对应的百分比为left=0%;center=50%;right=100%
top，center，bottom 是垂直方向的取值，其中top=0%;center=50%;bottom=100%

举例：transform: rotate(45deg); transform-origin:50px 50px;
(第一个50px代表：x轴移动50px,第二个50px代表：y轴移动50px;此时inner的原点是test左上角的位置，inner基于该原点旋转45deg)
 

 举例：transform: rotate(45deg); transform-origin:left;

(是以左边的中心点为原点然后再进行45deg旋转，其余的top，right和bottom类似)

注释： 设计稿宽度：1920  设计稿高度：1080

1. 自适应比例展示，页面会留白

   ---

   当屏幕宽高比例小于设计稿时，按设计稿比例沿水平方向铺满屏幕。当屏幕宽高比大于设计稿时，按设计稿比例沿着垂直方向铺满屏幕。用等比例缩放的形式，不论屏幕多大，分辨率是什么，都能呈现完美效果。

   func setScale() {let designWidth = 1920;//设计稿的宽度，根据实际项目调整let designHeight = 1080;//设计稿的高度，根据实际的项目调整let documentWidth = document.documentElement.clientWidthlet documentHeight = document.documentElement.clientHeightlet scale = documentWidth /documentHeight < designWidth/designHeight ?(documentWidth  /designWidth):(documentHeight /designHeight )document.querySelector('#screen).style.transform = `scale($(scale)) translate(-50%);`
   }window.onresize = function() {setScale()
   }

2. 轴铺满X，Y轴自适应滚动

   ---

   以X轴比例，进行缩放。

   let designWidth = 1920px; //设计稿的宽度
   let designHeight = 1080px; //设计稿的高度
   let documentWidth = document.documentElement.clientWidth; //窗口的宽度
   let documentHeight = document.documentElement.clientHeight; //窗口的高度let scaleWidth = documentWidth / designWidth ;样式：transform：scale(scaleWidth,scaleWidth ); transform-origin:center center;

3. Y轴铺满，X轴自适应滚动

   ---

   以Y轴的比例，进行缩放。

   let designWidth = 1920px; //设计稿的宽度
   let designHeight = 1080px; //设计稿的高度
   let documentWidth = document.documentElement.clientWidth; //窗口的宽度
   let documentHeight = document.documentElement.clientHeight; //窗口的高度let scaleHeight = documentHeight / designHeight ;样式：transform：scale(scaleHeight ,scaleHeight ); transform-origin:center center;
   

4. 强行拉伸画面，填充所有视图

   ---

   分别以X轴比例和Y周比例缩放。

   let designWidth = 1920px; //设计稿的宽度
   let designHeight = 1080px; //设计稿的高度
   let documentWidth = document.documentElement.clientWidth; //窗口的宽度
   let documentHeight = document.documentElement.clientHeight; //窗口的高度let scaleWidth = documentWidth / designWidth ;
   let scaleHeight = documentHeight / designHeight ;样式： transform:scale(scaleWidth , scaleHeight ); transform-origin:center center;