继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第4天 前端工程师学习笔记

踩一个脚印
关注TA
已关注
手记 24
粉丝 0
获赞 0

第一模块

课程信息

    课程名称:前端工程师

    课程章节:第三周 2D与3D转换

    课程讲师:未知

第二模块

课程内容:


空间移动

  • 当元素进行3D旋转后,即可继续添加translateX()、translateY()、translateZ()、属性让元素在空间继续移动

    kongjian

  • 空间移动要添加在3D旋转之后

    以当前的旋转面形成一个坐标轴,沿着x、y、z轴移动

     transform:rotateX(30deg) translateX(30deg) translateZ(100deg);
  • 制作一个正方形

  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  • <meta charset="UTF-8">

  • <meta http-equiv="X-UA-Compatible" content="IE=edge">

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • <title>实现一个正方体</title>

  • <style>

  • *{

  • margin0;

  • padding0;

  • }

  • .box{

  • width200px;

  • height200px;

  • border1px solid #000;

  • margin100px auto;

  • perspective300px;

  • positionrelative;

  • }

  • .box p{

  • /* 使用绝对定位使每个p标签都在舞台的基准位置 */

  • /* 从同一个位置出发形成正方体 */

  • positionabsolute;

  • left0;

  • top0;

  • height200px;

  • width200px;

  • }

  • .box p:nth-child(1){

  • background-colorrgba(219,56,211,0.486);

  • /* 前面 */

  • transformtranslateZ(100px);

  • }

  • .box p:nth-child(2){

  • background-colorrgba(16238270.486);

  • /* 顶面 */

  • /* 随着它的后仰,它的正方向已经变成了向上(面朝的方向变为了向上),所以用translateZ而不是translateY */

  • transformrotateX(90degtranslateZ(100px);

  • }

  • .box p:nth-child(3){

  • background-colorrgba(13742070.486);

  • /* 背面 */

  • transformrotateX(180degtranslateZ(100px);

  • }

  • .box p:nth-child(4){

  • background-colorrgba(93660.486);

  • /* 底面 */

  • transform:rotateX(-90degtranslateZ(100px);

  • }

  • .box p:nth-child(5){

  • background-colorrgba(24523740.486);

  • /* 右侧面 */

  • transformrotateY(90degtranslateZ(100px);

  • }

  • .box p:nth-child(6){

  • background-colorrgba(219132560.486);

  • /* 左侧面 */

  • transformrotateY(-90degtranslateZ(100px);

  • }

  • </style>

  • </head>

  • <body>

  • <div class="box">

  • <p></p>

  • <p></p>

  • <p></p>

  • <p></p>

  • <p></p>

  • <p></p>

  • </div>

  • </body>

  • </html>

第三模块

学习收获与心得:

    成功没有捷径,只有靠自己的努力和付出才能取得胜利

第四模块

学习完毕截图

https://img2.sycdn.imooc.com/6327009c0001177717161064.jpghttps://img1.sycdn.imooc.com/632700a30001f4ee17141220.jpghttps://img1.sycdn.imooc.com/632700aa0001f69517161050.jpg


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP