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

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