首页 前端知识 CSS3 2D&3D学习笔记

CSS3 2D&3D学习笔记

2024-08-24 23:08:14 前端知识 前端哥 722 812 我要收藏

2D转换

2D转换之translate

  transform:translate(x,y);分开写
  transform:translateX(n);
  transform:translateY(n);
  • 定义2D转换中的移动,沿着X、Y轴移动

  • translate不会影响到其他元素的位置

  • translate中的百分比单位是相对于自身元素的

  • 对行内标签没有效果


2D转换之rorate

  
  transform:rorate(度数);
  • 单位是deg

  • 角度为正,顺时针,负、逆时针

  • 默认旋转中心点是元素的中心点

CSS3——三角制作

  
  <body>
      <div></div>
  </body>
  div {
          position: relative;
          width: 240px;
          height: 35px;
          border: 1px solid black;
  ​
      }
  ​
      div::after {
          position: absolute;
          content: '';
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          top: 8px;
          right: 15px;
          /*高度宽度记得加,刚开始就忘加了 要加定位定位效果,需要宽高*/
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          /*口诀:谁做动画给谁加过渡*/
          transition: all 0.3s;
      }
      /*鼠标经过谁,让谁旋转搞明白*/
      div:hover::after {
          transform: rotate(225deg);
      }

2D转换中心点transform-origin

  
  transform-origin:x y;
  • 注意后面的参数x、y用空格分开

  • 默认转换中心点为元素的中心点(50% 50%)

  • 还可以给元素设置像素或方位名词(top、right、left、bottom、center)


旋转中心点案例

  
  <body>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  ​
  </body>
  
  div {
              overflow: hidden;
              width: 200px;
              height: 200px;
              border: 1px solid #ccc;
              float: left;
          }
  ​
          div::before {
              content: "我是伪元素";
              width: 100%;
              height: 100%;
              background-color: aqua;
              display: block;
              /*谁做过渡给谁加!!!*/
              transition: all 0.4s;
              transform: rotate(180deg);
              transform-origin: left bottom;
          }
  ​
          div:hover::before {
              transform: rotate(0deg);
          }

2D转换之缩放scale

  
  transform:scale(x,y);
  • 其中的x、y用逗号分隔

  • transform:scale(1,1):宽高放大1倍,相当于不变

  • transform:scale(2):只写第一个参数,第二个参数和第一个参数一样

  • sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

分页按钮案例

  
  <body>
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
      </ul>
  </body>
  
  li {
          width: 30px;
          height: 30px;
          background-color: aqua;
          border: 1px solid black;
          margin: 10px;
          list-style: none;
          border-radius: 50%;
          text-align: center;
          float: left;
          line-height: 30px;
          cursor: pointer;
      }
  ​
      li:hover {
          transform: scale(1.3);
      }

2D转换综合写法

注意事项:

  1. 同时使用多个转换,其格式为:transform:translate()rotate0scale0)..等

  2. 其顺序会影转换的效果。(先旋转会改变坐标轴方向)

  3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前


动画

1.先定义动画(keyframes)

2.再使用(调用动画)

  
  @keyframes 动画名称 {
          /* 0%是动画的开始 */
          0% {
              background-color: red;
          }
          /* 100%是动画的结束 */
          100% {
              background-color: blue;
          }
      }
  
  div{
          /* 调用动画名称 */
          animation-name: 动画名称;
          /* 调用动画持续时间 */
          animation-duration: 1s;
      }

动画序列

  • 0% 是动画的开始,100%是动画的完成。这样的规则就是动画序列。

  • 在 @keyframes 中规定某项CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果

  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

  • 请用百分比来规定变化发生的时间,或用关键词“from"和“to”,等同于0%和100%。

  
  @keyframes move {
          0% {
              transform: translate(0, 0);
          }
  ​
          25% {
              transform: translate(1000px, 0);
          }
  ​
          50% {
              transform: translate(1000px, 500px);
          }
  ​
          75% {
              transform: translate(0, 500px);
          }
  ​
          100% {
              transform: translate(0, 0);
          }
      }
  ​
      div {
          height: 200px;
          width: 200px;
          background-color: aqua;
          animation-name: move;
          animation-duration: 10s;
      }
  
  <body>
      <div></div>
  </body>

动画属性简写

  
  animation: name duration timing-function delay iteration-count direction fill-mode;

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或结束的状态

前两个属性必须写 linear匀速

linear匀速

热点图案例

  
  <body>
      <div class="map">
          <div class="city">
              <div class="dotted"></div>
              <div class="pulse1"></div>
              <div class="pulse2"></div>
              <div class="pulse3"></div>
          </div>
          <div class="city tb">
              <div class="dotted"></div>
              <div class="pulse1"></div>
              <div class="pulse2"></div>
              <div class="pulse3"></div>
          </div>
          <div class="city gz">
              <div class="dotted"></div>
              <div class="pulse1"></div>
              <div class="pulse2"></div>
              <div class="pulse3"></div>
          </div>
      </div>
  </body>
  
  body {
          background-color: #333;
      }
  ​
      .map {
          position: relative;
          width: 747px;
          height: 616px;
          background: url(media/map.png) no-repeat;
          margin: 0 auto;
      }
  ​
      .city {
          position: absolute;
          top: 227px;
          right: 193px;
          color: #fff
      }
      /*就近原则*/
      .tb {
          /*这里用top right覆盖掉原来的位置,用bottom、left不会覆盖,保持一致*/
          top: 500px;
          right: 80px;
      }
  ​
      .gz {
          top: 547px;
          right: 203px
      }
  ​
      .city div[class^="pulse"] {
          /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          width: 8px;
          height: 8px;
          box-shadow: 0 0 12px #009dfd;
          animation: pulse 1.2s linear infinite;
      }
      /*注意权重问题*/
      .city div.pulse2 {
          animation-delay: 0.4s;
      }
  ​
      .city div.pulse3 {
          animation-delay: 0.8s;
      }
  ​
      @keyframes pulse {
          0% {}
  ​
          70% {
              /*不能用transform:scale(x,y),会让阴影变大*/
              width: 40px;
              height: 40px;
              /*透明度*/
              opacity: 1;
          }
  ​
          100% {
              width: 80px;
              height: 80px;
              opacity: 0;
          }
      }

速度曲线细节

案例:奔跑的熊

  
  <body>
      <div></div>
  </body>
  
  body {
              background-color: #ccc;
          }
          /*要让熊跑到舞台中间,需要加定位。子绝父相*/
          div {
              position: absolute;
              width: 200px;
              height: 100px;
              background: url(media/bear.png) no-repeat;
              /*多个动画之间用逗号分隔*/
              animation: bear .4s steps(8) infinite, move 5s forwards;
              /* steps(8)表示动画分8步完成,infinite表示无限循环 */
          }
  ​
          @keyframes bear {
              0% {
                  background-position: 0 0;
              }
  ​
              100% {
                  background-position: -1600px 0;
              }
          }
  ​
          @keyframes move {
              0% {
                  left: 0;
              }
  ​
              100% {
                  left: 50%; 
                  /*transform: translate(-100px);*/
                  transform: translate(-50%);
                  /*走自身宽度的一半,不用随盒子的改变再次计算,方便*/
              }
          }

3D转换

  
  transform:translate3d(x,y,z);

  • transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离

  • 注意:translateZ一般用px单位

  • 往外是正值,往里是负值

透视

透视写在被观察元素的父盒子上面的

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大,近大远小。

3D旋转 rotate3d

  • transform:rotateX(45deg):沿着x轴正方向旋转 45度

  • transform:rotateY(45deg) :沿着y轴正方向旋转 45deg

  • transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg

左手准则

左手的手拇指指向 x轴的正方向:

其余手指的弯曲方向就是该元素沿着x轴旋转的方向

左手的手拇指指向 y轴的正方向:

其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)

3D呈现 transfrom-style

  • 控制子元素是否开启三维立体环境。

  • transform-style: preserve-3d; 子元素开启立体空间

  • transform-style: flat 子元素不开启3d立体空间 默认的

  • 代码写给父级,但是影响的是子盒子(这个属性很重要,后面必用)


3D属性简写

如果有移动要先写移动,再写其他的样式


案例:双面翻转⭐

box父盒子里面包含前后两个子盒子

box 是翻转的盒子 front是前面盒子 back是后面盒子

  
  <body>
      <div class="box">
          <div class="font">柯南</div>
          <div class="back">路飞</div>
      </div>
  </body>
  ​

  
  body {
          perspective: 400px;
      }
  ​
      .box {
          position: relative;
          width: 300px;
          height: 300px;
          margin: 100px auto;
          /*子元素开启立体空间*/
          transform-style: preserve-3d;
          transition: all .4s;
          backface-visibility: hidden;
      }
  ​
      .box:hover {
          transform: rotateY(180deg);
      }
  ​
      .font,
      .back {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          border-radius: 50%;
          font-size: 20px;
          color: #fff;
          text-align: center;
          line-height: 300px;
      }
  ​
      .font {
          background-color: aqua;
          z-index: 1;
      }
  ​
      .back {
          background-color: red;
          transform: rotateY(180deg);
      }

案例:3D导航栏⭐

  
  <body>
      <ul>
          <li>
              <div class="box">
                  <div class="font">熊大</div>
                  <div class="bottom">熊二</div>
              </div>
          </li>
          <li>
              <div class="box">
                  <div class="font">熊大</div>
                  <div class="bottom">熊二</div>
              </div>
          </li>
          <li>
              <div class="box">
                  <div class="font">熊大</div>
                  <div class="bottom">熊二</div>
              </div>
          </li>
          <li>
              <div class="box">
                  <div class="font">熊大</div>
                  <div class="bottom">熊二</div>
              </div>
          </li>
          <li>
              <div class="box">
                  <div class="font">熊大</div>
                  <div class="bottom">熊二</div>
              </div>
          </li>
  ​
      </ul>
  </body>
  
  * {
              margin: 0;
              padding: 0;
          }
  ​
          ul {
              margin: 100px;
          }
  ​
          ul li {
              float: left;
              width: 120px;
              height: 35px;
              list-style: none;
              /* 一会我们需要给box 旋转 也需要透视 干脆给1i加 里面的子盒子都有透视效果 */
              perspective: 500px;
              margin: 10px;
          }
  ​
          .box {
              position: relative;
              width: 100%;
              height: 100%;
              transform-style: preserve-3d;
              transition: all .4s;
          }
  ​
          .font,
          .bottom {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              font-size: 16px;
              color: #fff;
              text-align: center;
              line-height: 35px;
          }
  ​
          .font {
              background-color: pink;
              z-index: 1;
              transform: translateZ(17.5px);
          }
  ​
          .bottom {
              background-color: skyblue;
              /* 这个x轴一定是负值 */
              /* 如果有移动要先写移动,再写其他的 */
              transform: translateY(50%) rotateX(-90deg);
          }
  ​
          .box:hover {
              transform: rotateX(90deg);
          }

案例:旋转木马⭐

  
  <body>
      <section>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </section>
  </body>
  
  body {
          perspective: 1000px;
      }
  ​
      section {
          position: relative;
          width: 300px;
          height: 200px;
          margin: 150px auto;
          transform-style: preserve-3d;
          animation: move 10s linear infinite;
          background: url(media/pig.jpg) no-repeat;
      }
  ​
      section div {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: url(media/dog.jpg) no-repeat;
      }
  ​
      @keyframes move {
          0% {
              transform: rotateY(0deg);
          }
  ​
          100% {
              transform: rotateY(360deg);
          }
      }
  ​
      section div:nth-child(1) {
          transform: rotateY(0deg) translateZ(300px);
      }
  ​
      section div:nth-child(2) {
          transform: rotateY(60deg) translateZ(300px);
      }
  ​
      section div:nth-child(3) {
          transform: rotateY(120deg) translateZ(300px);
      }
  ​
      section div:nth-child(4) {
          transform: rotateY(180deg) translateZ(300px);
      }
  ​
      section div:nth-child(5) {
          transform: rotateY(240deg) translateZ(300px);
      }
  ​
      section div:nth-child(6) {
          transform: rotateY(300deg) translateZ(300px);
      }


浏览器私有前缀

  • -moz-:代表 firefox 浏览器私有属性

  • -ms-:代表 ie 浏览器私有属性

  • -ms-:代表 ie 浏览器私有属性

  • -webkit-:代表 safari、chrome 私有属性

  • -o-:代表 Opera 私有属性


移动端

meta视口标签

  
  <meta name="viewport" content="width=device-width, user-scalable=no, 
  initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2倍图

物理像素&物理像素比

  • 我们开发时候的1px 不是一定等于1个物理像素的

  • 我们开发时候的1px 不是一定等于1个物理像素的

  • PC端页面,1个px 等于1个物理像素的,但是移动端就不尽相同

  • PC端页面,1个px 等于1个物理像素的,但是移动端就不尽相同

  • 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比

多倍图

  
   /* 在 iphone8 下面 */
   img{
   /*原始图片100*100px*/
   width: 50px;
   height: 50px;
   } 
  .box{
   /*原始图片100*100px*/
   background-size: 50px 50px;
   }

背景缩放 background-size

  
  background-size: 背景图片宽度 背景图片高度;
  • 单位: 长度|百分比|cover|contain;

  • 只写一个参数 肯定是宽度 高度省略了 会等比例缩放

  • 里面的单位可以跟% 相对于父盒子来说的

  • cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

  • contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16777.html
标签
评论
发布的文章

jQuery File Upload 使用教程

2024-09-03 02:09:33

jQuery笔记

2024-05-03 18:05:51

jQuery-Spectragram 使用教程

2024-09-03 02:09:26

echarts问题汇总

2024-09-03 02:09:12

echarts自定义悬浮提示

2024-09-03 02:09:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!