CSS2D3D转换及移动端开发

最新推荐文章于 2024-05-29 16:40:49 发布

remember_slll

最新推荐文章于 2024-05-29 16:40:49 发布

阅读量244

点赞数

文章标签： 3d css3 css 前端

本文链接：https://blog.csdn.net/remember_slll/article/details/129351247

版权

1.CSS2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
转换（transform）可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

2D转换之移动translate

transform: translate(x, y);
    /* 或者分开写 */
    transform: translateX(x);
    transform: translateY(y);

2D转换中心点transform-origin

中心点：left bottom right cente top
transform-origin: x y;
缩放：
transform: scale(1, 1);

动画 animation

@keyframes move{
      0%{
        transform: translateX(0px);
      }
      25%{
        transform: translateX(1000px);
      }
      50%{
        transform: translate(1000px,500px);
      }
      75%{
        transform: translate(0,500px);
      }
      100%{
        transform: translate(0);
      }
    }

    div{
      width: 50px;
      height: 50px;
      background-color: antiquewhite;
      animation-name: move;
      animation-duration: 7s;
    }

动画常见属性

/* animation: name duration timing-function delay iteration-count direction fill-mode; */
      animation: move 2s linear 1s 5 alternate;

2.3D转换

:::warning
3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

transform: translateX(100px)：仅仅是在X轴上移动
transform: translateY(100px)：仅仅是在Y轴上移动
transform: translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform: translate3d(x,y,z)：其中x、y、z分别要移动的轴的方向的距离（x、y、z没有不可省略，写0）
:::
透视

透视必须写在被观察父盒子里面

3.3D旋转

tansform:rotateX(45deg)
tranform:rotateY(45deg)
tranform:rotateZ(45deg)
tranform:rotate3d(1,0,0,45deg)
tanform-style

<style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      perspective: 400px;
      transform-style: preserve-3d;
      transition: all 1s;
    }

    .box:hover {
      transform: rotateY(60deg);
    }


    .box div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }


    .box div:nth-child(2) {
      background-color: aqua;
      transform: rotateX(60deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <div></div>
    <div></div>
  </div>
</body>

实现3d翻转效果
1、backface-visibility：visible
默认值，背面朝向用户时可见
2、backface-visibility：hidden
背面朝向用户时不可见。

<style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 1s;
      transform-style: preserve-3d;
    }


    /* 翻转效果 */
    .box:hover {
      transform: rotateY(180deg);
    }


    .front,
    .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      line-height: 200px;
      text-align: center;
    }


    .front {
      background-color: aquamarine;
      /* 翻转背面是否可见 */
      backface-visibility: hidden;
    }


    .back {
      transform: rotateY(180deg);
      background-color: pink;
      backface-visibility: hidden;
    }
  </style>
</head>


<body>
  <div class="box">
    <div class="front">黑马程序员</div>
    <div class="back">pink老师</div>
  </div>
</body>

私有前缀

2.移动端

1.移动端常见不布局方式

单独制作移动端页面 (主流)
- 流式布局 (百分比布局)
- flex 弹性布局 (强烈推荐)
- less + rem + 媒体查询布局
- 混合布局
响应式界面兼容移动端 (其次)
- 媒体查询
- bootstrap

属性解释说明
width 宽度设置的是 viewport 宽度，可以设置 device-width 特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字user-scalable 用户是否可以缩放，yes 或 no (1 或 0)

2.CSS3渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片
linear-gradient() 函数没有内在尺寸

div{
    width: 500px;
    height: 500px;
    background-image: linear-gradient(red ,blue,green);
  }

2.文字渐变

先设置背景渐变

background: linear-gradient(90deg, #45CAFF,#1471FB);

设置 -webkit-background-clip: text; 意思就是以盒子内的文字作为裁剪区，文字以外的部分就会被剪掉
把文字设置为透明

p {
      font-size: 50px;
      background: linear-gradient(yellow, red, #1471FB);
      -webkit-background-clip: text;
      color: transparent;
    }
  </style>
</head>


<body>
  <div></div>
  <p>456789</p>

3.flex布局

flex 布局父项常见属性
以下由6个属性是对父元素设置的

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式 (多行)
align-items：设置侧轴上的子元素的排列方式 (单行)
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
align-content 和 align-items
align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content 使用于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找 align-items 多行找 align-content

1.flex-direction
2. justify-content：主轴上的子元素排列方式

3.flex-wrap：子元素是否换行

4.align-content：侧轴上的子元素的排列方式 (多行)

5.align-items：侧轴上的子元素的排列方式 (单行)

6.flex-flow

flex-flow 属性是复合属性， flex-direction 和 flex-wrap 属性的复合属性
flex-flow: row nowrap;

.box1 {
      width: 500px;
      height: 500px;
      background-color: aliceblue;
      margin: 100px auto;
      display: flex;
      /* 设置主轴 */
      flex-flow: row wrap;
      /* 设置主轴元素排列顺序 */
      justify-content: space-between;
      /* 是否换行 */
      /* 侧轴子元素排列顺序（多行） */
      /* align-content: flex-end; */
        /* 侧轴子元素排列顺序（单行） */
      align-items: flex-start;
    }

flex 属性

flex 属性定义项目分配父盒子的剩余空间，用 flex 来表示占多少分数
属性值为数字，数字为1，表示占总份数中的1 份，默认值为0

.box1 div:nth-child(2){
      flex:1
    }
    .box1 div:nth-child(1){
      flex:3
    }
    .box1 div:nth-child(3){
      flex:2
    }

align-self 控制子项自己在侧轴的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

order 属性定义子项的排列顺序

span:nth-child(2) {
      /* 调整子项加载的顺序，默认值是 0，如果想往前提，属性值可以为负数 */
      order: -1;
      /* 如果前面的元素想往后移,属性值要比前面都大 */

3.rem基础

rem (root em) 是一个相对单位，类似于 em，em 是父元素字体大小
不同的是 rem 的基准是相对于元素的字体大小
比如，根元素 html 设置 font-size: 12px; 非根元素设置 width:2rem;转换成px表示就是 24px
rem 的优势：父元素文字大小可能不一致，但是整个页面只有一个，可以很好的来控制整个页面的元素大小比例

媒体查询

媒体查询(Media Query) 是 CSS3新语法

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设置都用得到多媒体查询

mediatype 媒体类型:

将不同的终端设备划分成不同的类型，称为媒体类型

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件:

and：可以将多个媒体特性连接到一起，相当于 “且” 的意思
not：排除某个媒体特性，相当于 “非” 的意思，可以省略
or：可以测试多个媒体查询的条件，只要有一个条件成立，就执行， “或” 的意思
obly：指定某个特定的媒体类型，可以省略

媒体类型

/* 在屏幕上最大宽度是800px <=800可以显示样式 */
    @media screen and (max-width:800px) {
      span {
        color: red;
      }

媒体查询案例

/* 在屏幕上最大宽度是800px <=800可以显示样式 */
    @media screen and (max-width:600px) {
     body{
      background-color: antiquewhite;
     }
    }

    @media screen and (min-width:601px) and (max-width:1000px)   {
      body{
        background-color: green;
      }
    }
    @media screen and (min-width:1001px){
      body{
        background-color: black;
      }
    }

媒体查询引入资源
主要是针对于不同的屏幕尺寸，调用不同的CSS样式文件

示例： ```html ``` #### less 使用easy Less插件编译Less文件编译后出现css文件

rem适配方案

页面元素的rem值=页面元素值（px）/ html font-size字体大小

html font-size字体大小=屏幕宽度/划分的分数（15）

4.苏宁案例

1.修改移动端视口内容

2.引入normalize.css

/* 初始化 */
 
body {
  min-width: 320px;
  max-width: 540px;
  margin: 0 auto;
  font: normal 14px/1.5 PingFangSC-regular, Tahoma, 'Lucida Grande', Verdana, 'Microsoft Yahei', STXihei, hei;
  color: #000;
  background: #f2f2f2;
  /* 取消点击高亮效果 */
  -webkit-tap-highlight-color: transparent;
  /* 防止文字大小失真问题 */
  -webkit-text-size-adjust: none;
  /* 取消页面横线滚动 */
  overflow-x: hidden;
  /* 测试高度 */
  /* height: 2660px; */
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


img {
  vertical-align: middle;
  border: 0;
  outline: 0;
}


a {
  text-decoration: none;
}


li {
  list-style: none;
}

3.设置公共comomon.less文件

我们划分的份数是15

// 根据不同屏幕的尺寸设置不同的html字体大小
// 划分的份数
// 如果是在pc端打开 html字体是50px
html{
  font-size: 50px;
}
@no:15;

@media screen and (min-width:320px) {
  html{
    font-size: (320px/@no);
  }
}

@media screen and (min-width:360px) {
  html{
    font-size: (360px/@no);
  }
}

@media screen and (min-width:375px){
  html{
    font-size: (375px/@no);
  }
}
@media screen and (min-width:384px){
  html{
    font-size: (384px/@no);
  }
}
@media screen and (min-width:400px){
  html{
    font-size: (400px/@no);
  }
}
@media screen and (min-width:414px){
  html{
    font-size: (414px/@no);
  }
}
@media screen and (min-width:424px){
  html{
    font-size: (424px/@no);
  }
}
@media screen and (min-width:480px){
  html{
    font-size: (480px/@no);
  }
}
@media screen and (min-width:540px){
  html{
    font-size: (540px/@no);
  }
}
@media screen and (min-width:720px){
  html{
    font-size: (720px/@no);
  }
}
@media screen and (min-width:750px){
  html{
    font-size: (750px/@no);
  }
}

4.把common.css引入index.less
@import ''common

5.设置body样式
让body居中
rem=（元素大小）/（宽度/份数），body元素大小=宽度，因此rem=份数

body{
  min-width:320px;
  width: 15rem;
  line-height: 1.5;
  margin: 0 auto;
  font-family: Arial, Helvetica;
  background: #F2F2F2;
}

设置头部区域样式

@baseFont: 50;


.search-content {
  display: flex;
  flex-direction: row;
  width: 15rem;
  height: (88rem/@baseFont);
  background-color: #FFC001;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);


  .claify {
    width: (44rem/@baseFont);
    height: (70rem/@baseFont);
    background: url(./image//classify.png) no-repeat;
    // 对图片缩放 保证图片大小随着父盒子大小改变
    background-size: (44rem/@baseFont) (70rem/@baseFont);
    margin: (11rem/@baseFont) (25rem/@baseFont) (7rem/@baseFont) (24rem/@baseFont);
  }


  .search {
    flex: 1;


    input {
      height: (66rem/@baseFont);
      border-radius: (33rem/@baseFont);
      margin-top: (12rem/@baseFont);
      width: 100%;
      outline: none;
      background-color: #FFF2CC;
      font-size: (25rem/@baseFont);
      padding-left: (55rem/@baseFont);
      color: #757575;
    }
  }


  .login {
    width: (75rem/@baseFont);
    height: (70rem/@baseFont);
    margin: (10rem/@baseFont);
    font-size: (25rem/@baseFont);
    line-height: (70rem/@baseFont);
    text-align: center;


    a {
      color: #fff;
    }
  }
}

<div class="search-content">
    <div class="claify"></div>
    <div class="search">
      <form action="">
        <input type="search" value="卫厨保暖季 满千减百">
      </form>
    </div>
    <div class="login"><a href="#">登录</a></div>
  </div>

设置banner和广告样式

.banner {
    width: (750rem/@baseFont);
    height: (368rem/@baseFont);

    img {
      width: 100%;
      height: 100%;
    }
  }
  .ad{
    display: flex;
    flex: 1;
    img{
      width: 100%;
    }
  }

设置nav导航区域

<div class="nav">
    <a href=""><img src="./image/nav1.png" alt="">
    <span>
      爆款手机
    </span>
    </a>
    <a href=""><img src="./image//nav_2.png" alt="">
    <span>苏宁超市</span>
    </a>
    <a href=""><img src="./image/nav_3.png" alt="">
    <span>生活家电</span>
    </a>
    <a href=""><img src="./image/nav_4.png" alt="">
    <span>苏宁拼购</span>
    </a>
    <a href=""><img src="./image/nav_5.png" alt="">
    <span>母婴玩具</span>
    </a>
    <a href=""><img src="./image/nav_6.png" alt="">
    <span>大聚惠</span>
    </a>
    <a href=""><img src="./image/nav_7.png" alt="">
    <span>赚钱</span>
    </a>
    <a href=""><img src="./image/nav_8.png" alt="">
    <span>领云估</span>
    </a>
    <a href="">
      <img src="./image/nav_9.png" alt="">
      <span>苏宁家电</span>
    </a>
    <a href="">
      <img src="./image/nav_9.png" alt="">
      <span>分类</span>
    </a>
   </div>

.nav {
    width: 15rem;
    display: flex;
    flex-wrap: wrap;


    a {
      width: (150rem/@baseFont);
      height: (140rem/@baseFont);
     text-align: center;
      img {
        display: block;
        width: (82rem/@baseFont);
        height: (82rem/@baseFont);
        margin: (10rem/@baseFont) auto 0;


      }
      span {
        font-size: (25rem/@baseFont);
        color: #333;
        
      }
    }

2.第二种适配方法引入flexible文件

(function flexible(window, document) {
  // 获取的html 的根元素
  var docEl = document.documentElement;
  // dpr 物理像素比
  var dpr = window.devicePixelRatio || 1;
 
  // adjust body font size    设置body 的字体大小
  function setBodyFontSize() {
    // 如果页面中有body 这一个元素，就设置body大小
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      // 如果页面中没有body 这个元素，则等页面中主要的DOM元素加载完毕后，再设置body的字体大小
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10    设置html 元素的字体大小
  function setRemUnit() {
    // rem  把html分成24等份
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }
 
  setRemUnit();
 
  // reset rem unit on page resize    当页面尺寸大小发生变化的时候，要重新设置一下rem 的大小
  window.addEventListener("resize", setRemUnit);
  // pageshow 重新加载页面触发的事件
  window.addEventListener("pageshow", function(e) {
    // e.persisted 返回的事true 就是说如果这个页面事从缓存取过来的页面，也需要重新计算一下rem 的大小
    if (e.persisted) {
      setRemUnit();
    }
  });
 
  // detect 0.5px supports    用来处理有些移动端的浏览器不支持0.5像素的写法
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

把flexible.js引入html文件中
就会根据不同屏幕大小改变页面html字体大小
cssrem插件

cssrem插件可以直接把px转换成rem
在设置中搜索cssroot可以修改font-size的html字体大小

以上是rem布局的两种方案

4.swiper插件

swiper插件可以制作轮播图
官网搜索swiper
使用方法：

打开你需要的轮播图效果打开源代码复制css js html 内容
下载swiper文件或者使用CDN

cdn地址：
<scriptsrc=“https://unpkg.com/swiper@8/swiper-bundle.min.js”></script>
<linkrel="stylesheet"href=“https://unpkg.com/swiper@8/swiper-bundle.min.css”>
查看API文档可以修改样式