網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例18圖片翻轉(zhuǎn)效果

教案18案例18圖片翻轉(zhuǎn)效果計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)理解翻轉(zhuǎn)動(dòng)畫(huà)的實(shí)現(xiàn)原理掌握3D變形的使用方法能力目標(biāo)能夠利用transform屬性實(shí)現(xiàn)圖片的變形效果素質(zhì)目標(biāo)引導(dǎo)學(xué)生了解和傳承中華優(yōu)秀傳統(tǒng)文化，增強(qiáng)文化自信和文化認(rèn)同引導(dǎo)學(xué)生樹(shù)立集體主義精神，培養(yǎng)團(tuán)結(jié)協(xié)作的能力教學(xué)重點(diǎn)圖片的翻轉(zhuǎn)效果教學(xué)難點(diǎn)perspective屬性教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析與實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開(kāi)討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建圖片翻轉(zhuǎn)動(dòng)畫(huà)效果，當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，圖片沿Y軸翻轉(zhuǎn)，前面的圖片不可見(jiàn)，顯示圖片后面的文字內(nèi)容，網(wǎng)頁(yè)瀏覽效果如圖18-1和18-2所示。二、案例分析與實(shí)現(xiàn)1．案例分析2．案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體略。第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）翻轉(zhuǎn)動(dòng)畫(huà)原理（5分鐘）學(xué)生分組討論遮罩動(dòng)畫(huà)實(shí)現(xiàn)的原理，教師進(jìn)行總結(jié)。3D變形（20分鐘）教師講解3D變形含義、與2D變形的區(qū)別及3D變形函數(shù)。教師講解rotate3d()基本語(yǔ)法格式。完成例18-1使用rotateX()實(shí)現(xiàn)元素圍繞X軸的3D旋轉(zhuǎn)變形。學(xué)生同步操作，做學(xué)教一體二、perspective屬性——設(shè)置3D透視效果（15分鐘）教師講解perspective屬性定義與作用。完成例18-2使用perspective設(shè)置透視效果。學(xué)生同步操作，做學(xué)教一體三、小結(jié)（5分鐘）理解翻轉(zhuǎn)動(dòng)畫(huà)的原理、掌握transform屬性實(shí)現(xiàn)3D變形的方法、能夠在網(wǎng)頁(yè)中實(shí)現(xiàn)圖片的翻轉(zhuǎn)效果。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)。作業(yè)2：掃碼觀看案例19中的微課，學(xué)習(xí)魔方動(dòng)畫(huà)效果實(shí)現(xiàn)。通過(guò)戲劇作品網(wǎng)頁(yè)展示社會(huì)主義核心價(jià)值觀、中華優(yōu)秀傳統(tǒng)文化和革命文化等內(nèi)容，引導(dǎo)學(xué)生了解和傳承中華優(yōu)秀傳統(tǒng)文化，增強(qiáng)文化自信和文化認(rèn)同。分組討論