html5第八课时,变形效果

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>

你可能感兴趣的:(HTML5)