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

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

CSS代码:

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .box {
  6. width: 236px;
  7. height: 420px;
  8. overflow: hidden;
  9. }
  10. .box img {
  11. width: 100%;
  12. height: 100%;
  13. transition: all .5s linear 0s;
  14. }
  15. .box img:hover {
  16. transform: scale(1.1, 1.1);
  17. }

二、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代码如下
  1. <div class="box"></div>
  • CSS代码
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. body {
  6. /*perspective: 3000px;*/
  7. /*transform-style: preserve-3d;*/
  8. }
  9. .box {
  10. margin: 30px auto;
  11. width: 200px;
  12. height: 200px;
  13. background: #00b38a;
  14. transform: translate3d(-100px, 100px, 1000px);
  15. transform: translateZ(1000px);
  16. transform: rotateX(45deg);
  17. transform: rotateY(45deg);
  18. transform: rotateZ(45deg);
  19. }

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

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

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

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

示例:

html

  1. <div class="container">
  2. <div class="box"></div>
  3. </div>

css代码:

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. body {
  6. }
  7. .container {
  8. position: relative;
  9. margin: 30px auto;
  10. width: 300px;
  11. height: 300px;
  12. background: transparent;
  13. border: 1px solid #000;
  14. perspective: 2000px; /*没有视距,就没有3d效果*/
  15. transform-style: preserve-3d; /*保留元素的3d视图*/
  16. transform-origin: center center;
  17. }
  18. .box {
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. right: 0;
  23. bottom: 0;
  24. margin: auto;
  25. z-index: 2;
  26. width: 300px;
  27. height: 300px;
  28. background: #00b38a;
  29. transform: rotateY(45deg);
  30. transform: rotateZ(15deg);
  31. }

四、3d变换魔方案例

html代码:

  1. <div class="main">
  2. <ul class="ul">
  3. <li><img src="img/zf_cube1.png" alt=""></li>
  4. <li><img src="img/zf_cube2.png" alt=""></li>
  5. <li><img src="img/zf_cube3.png" alt=""></li>
  6. <li><img src="img/zf_cube4.png" alt=""></li>
  7. <li><img src="img/zf_cube5.png" alt=""></li>
  8. <li><img src="img/zf_cube6.png" alt=""></li>
  9. </ul>
  10. </div>

css代码

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .main {
  6. width: 320px;
  7. height: 560px;
  8. background: url(img/zf_cubeBg.jpg) no-repeat;
  9. position: absolute;
  10. left: 50%;
  11. top: 50%;
  12. transform: translate(-50%, -50%);
  13. -webkit-perspective: 3000px;
  14. perspective: 3000px;
  15. }
  16. ul, li {
  17. list-style: none;
  18. }
  19. .ul {
  20. transform-style: preserve-3d; /*保留元素的3D位置*/
  21. width: 255px;
  22. height: 255px;
  23. position: absolute;
  24. top: 0;
  25. right: 0;
  26. bottom: 0;
  27. left: 0;
  28. margin: auto;
  29. animation: move 30s linear 0s infinite;
  30. }
  31. .ul li {
  32. position: absolute;
  33. width: 100%;
  34. height: 100%;
  35. }
  36. .ul li img {
  37. width: 100%;
  38. height: 100%;
  39. }
  40. .ul li:nth-child(1) {
  41. transform: translateZ(-127.5px) rotateY(180deg);
  42. }
  43. .ul li:nth-child(2) {
  44. transform: translateX(-127.5px) rotateY(-90deg);
  45. }
  46. .ul li:nth-child(3) {
  47. transform: translateY(-127.5px) rotateX(90deg);
  48. }
  49. .ul li:nth-child(4) {
  50. transform: translateY(127.5px) rotateX(-90deg);
  51. }
  52. .ul li:nth-child(5) {
  53. transform: translateX(127.5px) rotateY(90deg);
  54. }
  55. .ul li:nth-child(6) {
  56. transform: translateZ(127.5px);
  57. }
  58. @keyframes move {
  59. 0% {
  60. transform: scale(0.6) rotateY(30deg);
  61. }
  62. 25% {
  63. transform: scale(0.6) rotateY(270deg)
  64. }
  65. 50% {
  66. transform: scale(0.6) rotateY(0deg);
  67. }
  68. 75% {
  69. transform: scale(.6) rotateX(180deg);
  70. }
  71. 100% {
  72. transform: scale(.6) rotateZ(120deg);
  73. }
  74. }

五、字体图标的使用

  1. 下载字体图标;
  2. 将字体图标放到项目目录中;
  3. 使用@font-face创建字体
  1. @font-face {
  2. font-family: "iconfont";
  3. src: url("fonts/iconfont.eot"), /*IE 9*/
  4. url("fonts/iconfont.woff") format('woff'),
  5. url("fonts/iconfont.ttf") format("truetype"), /*chrome ,firefox, opera, safari, android ios 4.2+*/
  6. url("fonts/iconfont.svg") format('svg'); /*ios 4.1*/
  7. }
  1. 在页面中引入这个css文件
  1. <link rel="stylesheet" href="index.css">
  1. 在需要的地方使用引用图标字体;
    5.1 使用伪类
  1. .box:before {
  2. display: block;
  3. content: '\f102';
  4. font-family: iconfont;
  5. font-size: 16px;
  6. color: red;
  7. }

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

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

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

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

六、媒体查询

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

用法:

  1. @media screen and (max-width: 400px){ /*当屏幕宽度小于400时生效的样式*/
  2. .box {
  3. width: 400px;
  4. height: 400px;
  5. background: #000;
  6. }
  7. }
  8. @media screen and (min-width: 800px) { /*当屏幕宽度大于800px时生效*/
  9. .box {
  10. width: 200px;
  11. height: 200px;
  12. background: red;
  13. }
  14. }
  15. /*更常用的是 all*/
  16. /*可以使用媒体查询根据不同的情况设置不同的样式*/
  17. @media all and (max-width: 375px) {
  18. .box {
  19. }
  20. }
  21. @media all and (max-width: 950px){
  22. }