CSS3:text-shadow属性、word-wrap属性、transform属性、transition属性、animation属性、3D变换：transform-style:preserve-3d-蒲公英云

CSS3:text-shadow属性、word-wrap属性、transform属性、transition属性、animation属性、3D变换：transform-style:preserve-3d

text-shadow属性：

text-shadow属性:水平偏移垂直偏移阴影大小颜色

word-wrap属性：

word-wrap属性：允许长单词、URL强制进行换行。normal(默认）、break-word（长单词换行）。

@font-face规则：

<style type="text/css">
            @font-face {
                font-family: name;  /* 定义字体名称 */
                src: url(fonts/mc.ttf);  /* 定义字体来源 */
            }
            p{
                font-family: name;   /* 引用自定义字体名称 */
            }
        </style>

2D转换方法：对元素进行旋转、缩放、移动、拉伸。

transform属性：rotate( )、scale( )

旋转：transform:rotate( deg); //单位deg. 当值为正时，顺时针旋转，为负值时逆时针旋转。

缩放：transform:scale(x,y); x:水平方向缩放的倍数. y:垂直方向缩放的倍数，若省略，同x.

0~1,缩小。大于1放大。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #t{
                border: 1px solid black;
                width: 300px;
                height: 300px;
                margin: 0 auto;
            }
            #right{
                margin: 15px auto;
                border: 1px solid black;
                width: 150px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                transform: rotate(30deg);  /* 顺时针旋转30度 */
            }
            #left{
                margin: 15px auto;
                border: 1px solid black;
                width: 150px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                transform: rotate(-30deg);  /* 逆时针旋转30度 */
            }
            #left:hover{
                transform: scale(1.5);  /* 放大1.5倍 */
            }
        </style>
    </head>
    <body bgcolor="white">
        <div id="t">
            <div id="right">旋转与缩放</div>
            <div id="left">旋转与缩放</div>
        </div>
    </body>
</html>

transition属性：

过渡：transition：将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”。

transition: 属性名持续时间过渡方法；属性名多个时用“ ，”隔开，或用all表示所有属性。

过渡方法的取值有：

值	描述
linear	匀速
ease	快慢快
ease-in	慢快
ease-out	快慢
ease-in-out	慢快慢

animation属性：动画

（1）定义动画——>@keyframes规则。

（2）调用动画——>animation属性。

animation属性

值	描述
animation	简写
animation-name	引用@keyframes动画的名称
animation-duration	动画完成时间
animation-timing-function	规定动画的速度曲线。默认是“ease”
animation-play-state	running \| paused

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            @keyframes wdcolor  /* 动画名称 */
            {
            0% {background-color:red; color: blue;}
            30% {background-color:blue; color: red;}
            60% {background-color:yellow; color: green;}
            100% {background-color:green; color: yellow;}
            }
            #s:hover{
                animation: wdcolor 5s linear;
            }
            #s{
                margin-top: 50px;
                width: 300px;
                height: 200px;
                text-align: center;
                line-height: 200px;
                font-size: 25px;
                font-weight:bold;
                border: 1px solid white;
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body bgcolor="white">
        <div id="s">
            动画效果
        </div>
    </body>
</html>

3D变换：transform-style:preserve-3d

transform属性：

延X轴方向旋转：rotateX( deg)

延Y轴方向旋转：rotateY( deg):

延Z轴方向旋转：rotateZ( deg):

透视属性：perspective;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #r{
                width: 1200px;
                border: 1px solid blue;
                height: 700px;
                margin: 10px auto;
                perspective: 800px;
            }
            img{
                width: 300px;
                height:500px;
            }
            #x,#y,#z{
                width: 302px;
                height: 502px;
                float: left;
                margin-left: 40px;
                margin-top: 100px;
                transition: linear 1s;
                transform-style: preserve-3d;
                border: 1px solid blue;
            }
            #x:hover{
                transform: rotateX(30deg);
            }
            #y:hover{
                transform: rotateY(180deg);
            }
            #z:hover{
                transform: rotateZ(60deg);
            }
        </style>
    </head>
    <body bgcolor="white">
        <div id="r">
            <div id="x">
                <img src="picture/45.png" />
            </div>
            <div id="y">
                <img src="picture/45.png "/>
            </div>
            <div id="z">
                <img src="picture/45.png "/>
            </div>
        </div>
    </body>
</html>