第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定

【金秋打卡】第4天 前端工程師學(xué)習(xí)筆記

標(biāo)簽:
Html5 CSS3

第一模块

课程信息

    课程名称:前端工程师

    课程章节:第三周 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


點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消