2D转换模块

作者: Jackson_yee_ | 来源:发表于2017-06-14 19:17 被阅读0次

章节 (20) 2D转换模块
2D转换模块
2017-02-24 CSS 学习笔记 pm
# 2D转换模块 transform(旋转/缩放/平移)
css3(5)
2D转换模块
2D转换模块
2D转换模块
2D转换模块
day20-CSS-2D转换模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换模块-形变中心点</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            /*
            第一个参数:水平方向
            第二个参数:垂直方向
            注意点
            取值有三种形式
            具体像素
            百分比
            特殊关键字
            */
            /*transform-origin: 200px 0px;*/
            /*transform-origin: 50% 50%;*/
            /*transform-origin: 0% 0%;*/
            /*transform-origin: center center;*/
            transform-origin: left top;
        }
        ul li:nth-child(1){
            /*
            默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
            */
            background-color: red;
            transform: rotate(30deg);
        }
        ul li:nth-child(2){
            background-color: green;
            transform: rotate(50deg);
        }
        ul li:nth-child(3){
            background-color: blue;
            transform: rotate(70deg);
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

image.png

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>95-2D转换模块-旋转轴向</title>

<style>

*{

margin: 0;

padding: 0;

}

ul{

width: 800px;

height: 500px;

margin: 0 auto;

}

ul li{

list-style: none;

width: 200px;

height: 200px;

margin: 0 auto;

margin-top: 50px;

border: 1px solid #000;

/*

1.什么是透视

近大远小

2.注意点

一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

*/

perspective: 500px;

}

ul li img{

width: 200px;

height: 200px;

/*perspective: 500px;*/

}

ul li:nth-child(1){

/*默认情况下所有元素都是围绕Z轴进行旋转*/

transform: rotateZ(45deg);

}

ul li:nth-child(2) img{

transform: rotateX(45deg);

}

ul li:nth-child(3) img{

/*

总结:

想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

*/

transform: rotateY(45deg);

}

</style>

</head>

<body>

<ul>

<li>![](images/rotateZ.jpg)</li>

<li>![](images/rotateX.jpg)</li>

<li>![](images/rotateY.jpg)</li>

</ul>

</body>

</html>