html5第八课时，变形效果

来源：互联网发布：程序员表白代码编辑：程序博客网时间：2024/05/18 08:01
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>变形效果</title>    <style>        img{            /*transform: translate(500px,100px);            /!*以左上角为中心点，向右和向下移动*!/*/            /*transform: scale(1.5,1);/!*放大图片,水平放大，垂直放大*!/*/            /*transform: skew(9deg);            /!*图片倾斜的角度 skew是以中心点倾斜，skewX是以x轴为中心倾斜                skewY是以y轴为中心倾斜*!/*/            /*transform: rotate(90deg);*/            /*图片旋转的角度，rotate是以中心点旋转，            rotateX是以x轴为中心旋转，rotateY是以Y轴为旋转轴。*/            /*对所有的属性添加过渡效果*/            transition-property: all; /*指定过渡使用的css属性*/            transition-duration: 2s;/*过渡完成的时间*/            transition-timing-function: ease;/*指定过渡函数，常用的ease等等*/            transition-delay: 3s;/*平滑过渡的时间，鼠标放在上面三秒后变化，离开后三秒变化。*/            /*以上四种属性，可以直接用transition:all 1.2s ease 3s;                其中all是表示所有的属性都是用过渡效果*/        }        img:hover{            transform: rotateY(180deg);        }    </style></head><body><img src="../../image/f3_Android1.png" alt=""/></body></html>
0 0