transform 可以对文字或图像的旋转、缩放、倾斜、移动进行变形处理。基准点为元素的中心点,可以通过transform-origin 修改基准点,如
transform-origin: left bootom;
使用rotate方法来实现文字或图像的旋转处理,在参数中指定旋转角度。
/*顺时针旋转30°*/
transform: rotate(30deg);
使用scale方法来实现文字或图像的缩放处理,在参数中指定缩放倍率。
/*水平方向、垂直方向缩小一半*/
transform: scale(0.5);
/*水平方向缩小一半、垂直方向放大一倍*/
transform: scale(0.5, 2);
使用skew方法来实现文字或图像的倾斜处理,在参数中分布指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
/*水平方向、垂直方向倾斜30°*/
transform: skew(30deg, 30deg);
/*只在水平方向倾斜30°*/
transform: skew(30deg);
使用translate方法来实现文字或图像的移动处理,在参数中分布指定水平方向上的移动距离与垂直方向上的移动距离。
/*水平方向、垂直方向移动50px*/
transform: translate(50px, 50px);
/*只在水平方向移动50px*/
transform: translate(50px);
Transitions 将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。
transition: property duration timing-function delay;
/*也可以单独书写*/
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: transition-delay;
background-color: #ff0;
color: #000;
width: 300px;
transition: background-color 1s linear, color 2s linear, width 3s linear;
transform-origin
修改基准点页面容器默认3840px * 2160px,通过监听onresize来动态控制缩放比例(这通常在大屏展示情况要使用),
1920 < 当前尺寸< 2880
时缩放0.75,<=1920
时缩放0.5。
<style>
.container {
width: 3840px;
height: 2160px;
background-color: #0b97c4;
}
.scale-three-quarters {
-weikit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
}
.scale-half {
-weikit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}
</style>
<div class="container"></div>
/**
* 动态改变缩放比例
*/
function changeScale() {
var containerDom = document.querySelector('.container');
if (window.outerWidth <= 1920) {
containerDom.classList.remove('scale-three-quarters');
containerDom.classList.add('scale-half');
} else if (window.outerWidth > 1920 && window.outerWidth < 2880) {
containerDom.classList.remove('scale-half');
containerDom.classList.add('scale-three-quarters');
}
}
// 进入页面时,进行动态判断控制
changeScale();
// 改变页面大小时,进行动态判断控制
window.onresize = changeScale;
如在分辨率下1920 * 1080会缩放0.5,截图效果如下(注意,竖向滚动条;横向缩放了,实际尺寸为1920px;纵向不会缩放,实际尺寸仍然为3840px)
Chrome浏览器下,可以通过设置html和body设置宽度、高度进行控制。
html, body {
width: 100%;
height: 100%;
}
但是,在Firefox下,上述设置不会起到任何效果。可以通过下述两种方式进行控制! 方案一:通过overflow:hidden来强制覆盖超出内容,只查看当前屏幕内容。缺点,超出的内容无法查看!
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
方案二:通过动态计算高度和宽度赋值给cotanier外层容器然后给外层容器设置overflow:hidden,来控制展示
<div style="height: 1080px; width: 1920px; overflow: hidden;">
<div class="container"></div>
</div>
上述height和width可以通过动态计算获取,然后赋值给DOM元素!完美解决!