当前位置：网站首页>2D Transform Module && Media Queries

2D Transform Module && Media Queries

2022-07-30 23:34:00 【qq_48639265】

2D转换模块

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

Comprehensive transformation ligatures format

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轴旋转

3DThe element view 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>

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

媒体查询

According to the characteristics of equipment display（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定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>