CSS3 2D&3D学习笔记

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转换综合写法

注意事项：

同时使用多个转换，其格式为:transform:translate()rotate0scale0)..等
其顺序会影转换的效果。(先旋转会改变坐标轴方向)
当我们同时有位移和其他属性的时候，记得要将位移放到最前

动画

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把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域