HTML5学习笔记(4.0)

最新推荐文章于 2023-09-16 19:58:48 发布

mez_Blog

最新推荐文章于 2023-09-16 19:58:48 发布

阅读量163

点赞数 1

分类专栏： HTML5 mez_Blog的专栏文章标签： html5 学习前端 html css3

本文链接：https://blog.csdn.net/mez_Blog/article/details/129390097

版权

mez_Blog的专栏同时被 2 个专栏收录

116 篇文章 6 订阅

订阅专栏

HTML5

32 篇文章 0 订阅

订阅专栏

2D平移

transform:translateX(100px);   //x轴的位移

transform:translateY(100px);   //y轴的位移

transform:translateX(100px) translateX(100px);   //往对角位置位移
transform:translate(100px,100px);       //两种写法相同

面试题：为什么用translate而不用left

translate支持在GPU上独立渲染

2D缩放

X轴和Y轴等比缩放

transform:scale(1.5);

只放大X轴或Y轴

transform:scaleX(1.5);

transform:scaleY(1.5);

放大中心位置的变换

transform-origin:left top;            //改变中心点的位置，默认为center
//left center   right center……

2D旋转

transform:rotate(10deg);         //顺时针旋转   ==rotateZ()

正值为顺时针旋转，负值为逆时针旋转。

rotateX，rotateY为三维轴中的X轴和Y轴进行旋转。

折扇效果示例

<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-07 17:04:18
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-07 20:53:59
 * @FilePath: \vscode\guodu.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        ul{
            margin: 10px auto;
            width: 600px;
            height: 400px;
            border: 5px solid gray;
        }
        
        li{
            width: 60px;
            height: 200px;
            position: absolute;
            left:50%;
            margin-left: -30px;
            bottom: 30px;
            text-align: center;
            transform-origin: bottom center;
            border-radius: 15px;
            transition: all 2s;
        }
        ul li:not(:nth-child(7)){
            opacity: 0;
        }
        ul:hover li{
            opacity: 1;
        }
        ul li:nth-child(1),ul li:nth-child(13){
            background: purple;
        }
        ul li:nth-child(2),ul li:nth-child(12){
            background: rgb(0, 100, 139);
        }
        ul li:nth-child(3),ul li:nth-child(11){
            background: deeppink;
        }
        ul li:nth-child(4),ul li:nth-child(10){
            background: darkcyan;
        }
        ul li:nth-child(5),ul li:nth-child(9){
            background: rgb(128, 73, 0);
        }
        ul li:nth-child(6),ul li:nth-child(8){
            background: darkorange;
        }
        ul li:nth-child(7){
            background: red;
        }
        ul:hover li:nth-child(1){
            transform: rotate(90deg);
        }
        ul:hover li:nth-child(13){
            transform: rotate(-90deg);
        }
        ul:hover li:nth-child(2){
            transform: rotate(75deg);
        }
        ul:hover li:nth-child(12){
            transform: rotate(-75deg);
        }
        
        ul:hover li:nth-child(3){
            transform: rotate(60deg);
        }
        ul:hover li:nth-child(11){
            transform: rotate(-60deg);
        }
        ul:hover li:nth-child(4){
            transform: rotate(45deg);
        }
        ul:hover li:nth-child(10){
            transform: rotate(-45deg);
        }
        ul:hover li:nth-child(5){
            transform: rotate(30deg);
        }
        ul:hover li:nth-child(9){
            transform: rotate(-30deg);
        }
        ul:hover li:nth-child(6){
            transform: rotate(15deg);
        }
        ul:hover li:nth-child(8){
            transform: rotate(-15deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</body>
</html>

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5学习笔记(4.0)

rotateX，rotateY为三维轴中的X轴和Y轴进行旋转。面试题：为什么用translate而不用left。translate支持在GPU上独立渲染。正值为顺时针旋转，负值为逆时针旋转。
复制链接

扫一扫