CSS3部分学习笔记

CSS3部分学习笔记

1.圆角边框与阴影

border-radius：水平值 垂直值；
text-shadow：水平偏移 垂直偏移 阴影大小 颜色；
word-warp：normal or break-word
word-warp属性可以允许长单词换到下一行

如

 p{
 width:8em;
 border:1px solid #333;
 word-wrap:break-word
 }

 还有盒子阴影:

 
 .box{
            width:100px;
            height: 150px;
            margin: 50px;
            background-color: #f00;
            box-shadow: 40px 20px 30px 30px #000 ,80px 40px #0f9d58;/* 外部阴影*/

            /*box-shadow: 40px 20px #000 inset;内部阴影*/


        }

2.2D转换

transform 向元素应用2D或3D转换
transform属性 ：
rotato(deg) 旋转
scale（x,y）缩放

rotato(deg) 角度为真值为顺时针 负值则为逆时针
scale(x,y) x为水平方向缩放的倍数
y为垂直方向缩放的倍数，如果省略则同x
值为0~1时为缩小，大于1为放大

transform 向元素应用 2D 或 3D 转换。

3.过渡与动画

1.transition： 简写属性，用于在一个属性中设置四个过渡属性
2.transition-property： 规定应用过渡的 CSS 属性的名称
3.transition-duration： 定义过渡效果花费的时间
4.transition-timing-function ： 规定过渡效果的时间曲线
属性值：ease ease-in ease-out ease-in-out
5.transition-delay ： 规定过渡效果何时开始

animation动画
样例：

先定义一个自己的效果mycolor 

@keyframes mycolor {
            0% {
                background-color: red;}
            30%{
                background-color: blue;
            }
            50%{
                background-color: green;}
            100%{
                background-color: yellow;}
        }
 div.sss{
            height: 30px;
            width: 100px;
            line-height: 30px;
            border-radius: 5px;
            color: red;
            background-color: silver;

        }
        div.sss:hover{
            animation: mycolor 5s linear;
        }

4.3D转换

transform-style： 规定被嵌套元素如何在 3D 空间中显示。
perspective ：规定 3D 元素的透视效果。
perspective-origin ：规定 3D 元素的底部位置。
backface-visibility ：定义元素在不面对屏幕时是否可见。

transform 属性： rotatoX（） rotatoY（） rotatoZ（）角度deg

perspective ：100px 眼睛到舞台的距离
如图：这是一个嵌套结果 无论有多少内容 他总是嵌套在舞台上的。

而内容的旋转是通过父容器进行的。
我们可以在代码中建造一个舞台stage 一个box简单实现有透视的在x y z上旋转。

  #stage{
            width: 300px;
            margin: 100px auto;
            perspective: 200px;
        }
        .box{
            width: 100px;
            height: 100px;
            float: left;
            transition: linear 1s;
            transform-style: preserve-3d;
        }
        img{
            width: 100px;
            height: 75px;
        }
        .x:hover{
            transform: rotateX(60deg);
        }
        .y:hover{
            transform: rotateY(60deg);
        }
        .z:hover{
            transform: rotateZ(60deg);
        }