2D转换模块&&媒体查询

最新推荐文章于 2024-07-25 15:47:15 发布

恬淡如雪

最新推荐文章于 2024-07-25 15:47:15 发布

阅读量42

点赞数

文章标签：媒体 css css3

本文链接：https://blog.csdn.net/qq_48639265/article/details/126072265

版权

2D转换模块

1. transform: rotate（45deg）
deg代表多少度
2. transform: translate (100px, 0px)
第一个参数：水平方向
第二个参数：垂直方向
3. transform: scale(1.5); transform: scale(0.5,0.5);
第一个参数：水平方向
第二个参数：垂直方向

综合转换连写格式

transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5)

形变中心点

transform-origin:
第一个参数:水平方向
第二个参数:垂直方向

取值有三种形式
具体像素
transform-origin: 200px 0px;
百分比
transform-origin: 50% 50%;
transform-origin: 0% 0%;
特殊关键字
transform-origin: center center;
默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

旋转轴向

transform: rotateZ(45deg); -------默认围绕z轴旋转
围绕z轴旋转
transform: rotateX(45deg);
围绕x轴旋转
transform: rotateY(45deg);
围绕y轴旋转

3D元素视图 perspective

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 310px;
            height: 438px;
            transition: transform 2s;
            margin: 50px auto;
            /* 设置3D视图 */
            perspective: 500px;

        }

        div:hover img {
            transform: rotateX(-45deg);
        }
    </style>
</head>

<body>
    <div>
        <img src="../../images/pk.png" alt="">
    </div>
</body>

</html>

效果图：
在这里插入图片描述

媒体查询

根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

PC端 1024px
pad端 >768px < 1024px
移动端 <768px

** 使用方法**

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>
多条语句
<style>
@media screen and (max-width:999px) and (min-width:801px){
			div{
				font-size: 50px;
			}
		} 
</style>