2. 3D变换、图标字体、媒体查询

珠峰培训，专注前端

一、盒子中有一个图片，鼠标移入是放大

<div class="box">
  <img src="img/1.jpg" alt="">
</div>

CSS代码：

* {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 236px;
      height: 420px;
      overflow: hidden;
    }
    .box img {
      width: 100%;
      height: 100%;
      transition: all .5s linear 0s;
    }
    .box img:hover {
      transform: scale(1.1, 1.1);
    }

二、3D变换

• transform属性不仅可以设置2D变换，还可以设置3D变换
• 常见的3D变换
• transform: translate3d(x, y, z) 设置在x、y、z轴上的偏移距离
• transform: translateZ(z) 设置元素在z轴的偏移距离
• transform: rotateX(deg) 设置元素绕着x轴转动的角度，角度为正上边缘向屏幕内转动
• transform: rotateY(deg) 设置元素绕着y轴转动的角度，角度为正右侧向屏幕内转动
• transform: rotateZ(deg) 设置元素绕着Z轴转动的角度，角度为顺时针转动
• HTML代码如下

<div class="box"></div>

• CSS代码

* {
    margin: 0;
    padding: 0;
}
body {
    /*perspective: 3000px;*/
    /*transform-style: preserve-3d;*/
}
.box {
    margin: 30px auto;
    width: 200px;
    height: 200px;
    background: #00b38a;
    transform: translate3d(-100px, 100px, 1000px);
    transform: translateZ(1000px);
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotateZ(45deg);
}

?? 但是发现一个问题，没有3d的效果，这是因为没有设置视距

三、perspective和transform-style: preserve-3d

• perspective: 视距，眼睛到元素的距离（透视的概念），默认值是0，有了视距值以后才能有近大远小的效果；
• transform-style: preserve-3d; 保留元素的3d视图，默认情况下浏览器不保留。

所以为了有3d效果，一般需要我们给元素的盒子设置意思两个属性；

示例：

html

<div class="container">
    <div class="box"></div>
</div>

css代码：

* {
    margin: 0;
    padding: 0;
}
body {
}
.container {
    position: relative;
    margin: 30px auto;
    width: 300px;
    height: 300px;
    background: transparent;
    border: 1px solid #000;
    perspective: 2000px; /*没有视距，就没有3d效果*/
    transform-style: preserve-3d; /*保留元素的3d视图*/
    transform-origin: center center;
}
.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    width: 300px;
    height: 300px;
    background: #00b38a;
    transform: rotateY(45deg);
    transform: rotateZ(15deg);
}

四、3d变换魔方案例

html代码：

<div class="main">
    <ul class="ul">
        <li><img src="img/zf_cube1.png" alt=""></li>
        <li><img src="img/zf_cube2.png" alt=""></li>
        <li><img src="img/zf_cube3.png" alt=""></li>
        <li><img src="img/zf_cube4.png" alt=""></li>
        <li><img src="img/zf_cube5.png" alt=""></li>
        <li><img src="img/zf_cube6.png" alt=""></li>
    </ul>
</div>

css代码

* {
    margin: 0;
    padding: 0;
}
.main {
    width: 320px;
    height: 560px;
    background: url(img/zf_cubeBg.jpg) no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-perspective: 3000px;
    perspective: 3000px;
}
ul, li {
    list-style: none;
}
.ul {
    transform-style: preserve-3d;    /*保留元素的3D位置*/
    width: 255px;
    height: 255px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    animation: move 30s linear 0s infinite;
}
.ul li {
    position: absolute;
    width: 100%;
    height: 100%;
}
.ul li img {
    width: 100%;
    height: 100%;
}
.ul li:nth-child(1) {
    transform: translateZ(-127.5px) rotateY(180deg);
}
.ul li:nth-child(2) {
    transform: translateX(-127.5px) rotateY(-90deg);
}
.ul li:nth-child(3) {
    transform: translateY(-127.5px) rotateX(90deg);
}
.ul li:nth-child(4) {
    transform: translateY(127.5px) rotateX(-90deg);
}
.ul li:nth-child(5) {
    transform: translateX(127.5px) rotateY(90deg);
}
.ul li:nth-child(6) {
    transform: translateZ(127.5px);
}
@keyframes move {
    0% {
        transform: scale(0.6) rotateY(30deg);
    }
    25% {
        transform: scale(0.6) rotateY(270deg)
    }
    50% {
        transform: scale(0.6) rotateY(0deg);
    }
    75% {
        transform: scale(.6) rotateX(180deg);
    }
    100% {
        transform: scale(.6) rotateZ(120deg);
    }
}

五、字体图标的使用

1. 下载字体图标；
2. 将字体图标放到项目目录中；
3. 使用@font-face创建字体

@font-face {
    font-family: "iconfont";
    src: url("fonts/iconfont.eot"), /*IE 9*/
    url("fonts/iconfont.woff") format('woff'),
    url("fonts/iconfont.ttf") format("truetype"), /*chrome ,firefox, opera, safari, android ios 4.2+*/
    url("fonts/iconfont.svg") format('svg'); /*ios 4.1*/
}

1. 在页面中引入这个css文件

<link rel="stylesheet" href="index.css">

1. 在需要的地方使用引用图标字体；
   5.1 使用伪类

.box:before {
  display: block;
  content: '\f102';
  font-family: iconfont;
  font-size: 16px;
  color: red;
}

5.2 引入图标字体的css文件，使用类名引用图标字体

<link rel="stylesheet" href="iconfont-embedded.css">

在需要的地方给元素添加 iconfont i-图标字体名称

<div class="box icon-font i-close-s"></div>

六、媒体查询

媒体查询：
查询不同的媒体类型，根据不同的宽度，是不同样式生效；经常应用PC端处理不同屏幕的分辨率

用法：

@media screen and (max-width: 400px){ /*当屏幕宽度小于400时生效的样式*/
    .box {
        width: 400px;
        height: 400px;
        background: #000;
    }
}
@media screen and (min-width: 800px) { /*当屏幕宽度大于800px时生效*/
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }
}
/*更常用的是 all*/
/*可以使用媒体查询根据不同的情况设置不同的样式*/
@media all and (max-width: 375px) {
    .box {
    }
}
@media all and (max-width: 950px){
}

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】