css-2D旋转

css - 2D旋转

 

 

 

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .xy {
            position: relative;
            width: 300px;
            height: 300px;
            border-top: 2px solid #000;
            border-left: 2px solid #000;
            margin: auto;

        }

        .xy::before {
            content: attr(metapoint);
            position: absolute;
            top: -20px;
            left: -20px;
            color: red;
        }

        .one {
            width: 200px;
            height: 200px;
            background-color: gray;
        }

        .one:hover::before {
            content: "移动到这儿了";
            display: block;
            width: 200px;
            height: 200px;
            background-color: #999;
            transform: translate(100px, 100px);
            /*
            transform: translate(x,y)
            x --> 水平 
            y --> 垂直
            不影响其他元素的位置
            行内标签没有效果
            */
        }

        .two {
            width: 150px;
            height: 150px;
            text-align: center;
            background-color: gray;
        }

        .two:hover::before {
            content: attr(data);

            text-align: center;
            display: block;
            text-align: center;
            width: 150px;
            height: 150px;
            background-color: #999;
            line-height: 150px;
            border-radius: 50%;
            border: 5px solid pink;

            /*顺时针旋转45度*/
            transform: rotate(45deg);
            /*transition: all 0.1s;*/
            /*
            transform: rotate(x,y)
            
            */
        }

        .three {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid gray;
        }

        .three::after {
            content: "";
            position: absolute;
            top: 7px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }

        .three:hover::after {
            /*旋转的中心点位置*/
            transform-origin: left bottom;
            /*top: 15px;*/

            transform: rotate(225deg);
        }

        div:nth-of-type(n+5) {
            float: left;
            margin: 5px;
            height: 200px;
            width: 200px;
            background: #0000ff;
            overflow: hidden;
        }

        div:nth-of-type(n+5):after {
            content: "";
            display: block;
            height: 200px;
            width: 200px;
            background-color: green;
            transition: all 0.5s;
            transform: rotate(90deg);
            transform-origin: left bottom;
        }

        div:nth-of-type(n+5):hover::after {
            transform: rotate(0deg);
        }

    </style>
</head>
<body>
<h1>transform CSS3 颠覆性特征之一
    <strong>位移</strong>
    <strong>旋转</strong>
    <strong>缩放</strong>
</h1>

<h2>2D 转化</h2>
<h3>二维坐标系</h3>

<div class="xy" metapoint="(0,0)">
		
</div>

<h3>位移 translate</h3>
<ul>
    <li>1. postion</li>
    <li>2. margin</li>
    <li>3.translate</li>
</ul>
<div class="one">
    原来盒子
</div>

<h3>旋转 rotate</h3>
<div class="two" data="旋转盒子">
    原来盒子
</div>

<h3>制作三角形</h3>
<div class="three">

</div>

<h3>旋转盒子排列</h3>
<div></div>
<div></div>
<div></div>
</body>
</html>

　　

 

posted @ 2020-08-12 11:58  similarface  阅读(322)  评论(0)    收藏  举报