美文网首页
11-CSS3-2D转换模块

11-CSS3-2D转换模块

作者: xiaohan_zhang | 来源:发表于2019-08-15 14:30 被阅读0次
  • transform
    示例代码:
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 800px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid #000;
    }
    ul li{
        list-style: none;
        width: 100px;
        background-color: slateblue;
        margin: 0 auto;
        margin-top: 50px;
        line-height: 50px;
        text-align: center;
    }
    ul li:nth-child(2){
        /*旋转,deg是单位,代表多少度*/
        transform: rotate(45deg);
    }
    ul li:nth-child(3){
        /*
        平移
        参数1:水平方向
        参数2:竖直方向
        */
        transform: translate(100px, 0);
    }
    ul li:nth-child(4){
        /*
        缩放
        参数1:水平方向
        参数2:竖直方向
        注意:
        取值为1,代表不变
        取值大于1,放大
        取值小于1,缩小
        如果水平和垂直缩放一样,可以只写一个参数
        */
        transform: scale(2,0.5);
    }
    ul li:nth-child(5){
        /*
        综合
        2D转换会修改坐标系,旋转后再平移 就不是水平方向了
        */
        transform: rotate(-45deg) translate(-50px, 0) scale(1.5);
    }
</style>
<body>
    <ul>
        <li>正常</li>
        <li>旋转</li>
        <li>平移</li>
        <li>缩放</li>
        <li>综合</li>
    </ul>
</body>
2D转换示例
  • transform-origin
    形变中心点
    默认情况下,所有元素都是以自己的中心点为参考点来旋转,我们可以通过形变中心点属性修改元素的参考点。
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        border: 1px solid #000;
        position: relative;
    }
    ul li{
        list-style: none;
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        /*
        修改形变中心点
        第一个参数:水平方向
        第二个参数:垂直方向
        注意:
        取值有三种形式:
        具体像素
        百分比
        特殊关键字 center top left right
        */
        transform-origin: 0px 0px;
        /*transform-origin: 0% 50%;*/
        /*transform-origin: left top;*/
    }
    ul li:nth-child(1){
        background-color: darkkhaki;
        transform: rotate(30deg);
    }
    ul li:nth-child(2){
        background-color: forestgreen;
        transform: rotate(50deg);
    }
    ul li:nth-child(3){
        background-color: gold;
        transform: rotate(70deg);
    }
</style>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
修改形变中心点前-以元素自身中心点旋转
修改形变中心点后-以左上角为中心点旋转
  • 旋转轴向
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 600px;
        height: 400px;
        margin: 0 auto;
        perspective: 400px;
    }
    ul li{
        list-style: none;
        width: 120px;
        height: 120px;
        margin: 0 auto;
        margin-top: 40px;
        border: 1px solid #000;
    }
    ul li img{
        width: 120px;
        height: 120px;
    }
    ul li:nth-child(1){
        /*默认情况下元素都是围绕Z轴旋转*/
        transform: rotateZ(45deg);
    }
    ul li:nth-child(2) img{
        transform: rotateX(45deg);
    }
    ul li:nth-child(3) img{
        transform: rotateY(45deg);
    }
</style>
<body>
    <ul>
        <li><img src="images/11.jpg" alt=""></li>
        <li><img src="images/22.jpeg" alt=""></li>
        <li><img src="images/33.jpg" alt=""></li>
    </ul>
</body>
  • 透视属性
    透视就是近大远小,距离物体多远观察
    perspective:500px
    透视属性必须添加到需要呈现近大远小效果的元素的父元素上。
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 315px;
        margin: 100px auto;
        background-color: #5B88B8;
        border: 1px solid #000;
        perspective: 300px;
    }
    div img{
        transform-origin: center bottom;
        transition: transform 6s;
    }
    div:hover img{
        transform: rotateX(90deg);
    }
</style>
<body>
    <div>
        <img src="images/0075Z4Wggy1fpoz1ftpj4j30qo15xn6b.jpg" alt="">
    </div>
</body>
  • 盒子阴影和文字阴影
  1. 给盒子添加阴影
    box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影
    注意点:
    1.1 盒子阴影分为内外阴影,默认为外阴影
    1.2 快速添加阴影只需三个参数即可
      box-shadow:水平偏移 垂直偏移 模糊度
      默认情况下阴影颜色与盒子内容颜色一致
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        background-color: antiquewhite;
        margin: 150px auto;
        line-height: 200px;
        text-align: center;
        box-sizing: border-box;
        /*默认外阴影*/
        box-shadow: 10px 10px 15px 10px red;
        /*内阴影*/
        /*box-shadow: 10px 10px 15px 10px red inset;*/
        /*阴影默认颜色为内容的颜色*/
        /*box-shadow: 10px 10px 10px;*/
    }
[图片上传中...(3721260-73cd4cd67fd43231.png-4b6323-1565851167589-0)]
</style>
<body>
    <div>我是盒子</div>
</body>
外阴影
内阴影
  1. 文字阴影
    text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        background-color: antiquewhite;
        margin: 150px auto;
        line-height: 200px;
        text-align: center;
        box-sizing: border-box;
        font-size: 40px;
        text-shadow: 10px 10px 10px blue;
    }
</style>
<body>
    <div>我是盒子</div>
</body>
文字阴影

相关文章

网友评论

      本文标题:11-CSS3-2D转换模块

      本文链接:https://www.haomeiwen.com/subject/ietnjctx.html