zoukankan      html  css  js  c++  java
  • 形变

    形变

    .box {
        transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg);
    }
    ​
    .box {
        transform: translateX(200px) | translateY(200px);
    }
    ​
    .box {
        transform: scaleX(2) scaleY(0.5)
    }

     记:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>形变</title>
    	<style type="text/css">
    		div {
    			 150px;
    			height: 150px;
    			background-color: red;
    			margin: 10px auto;
    			transition: 3s;
    		}
    		/*旋转形变:旋转的是角度 deg*/
    		.d1:hover {
    			/*transform: rotateX(3600deg);*/
    			/*transform: rotateY(3600deg);*/
    			/*transform: rotateZ(3600deg);*/
    			transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);
    		}
    		/*偏移形变:偏移的是距离 px*/
    		.d2:hover {
    			/*transform: translateX(200px);*/
    			/*transform: translateY(200px);*/
    			transform: translateX(200px) translateY(200px);
    		}
    		/*缩放形变:缩放的是比例*/
    		.d3:hover {
    			transform: scale(2, 0.5);
    		}
    		.d4:hover {
    			/*transform: translateX(200px) rotateZ(3600deg);*/
    			transform: rotateZ(3600deg) translateX(200px);
    		}
    	</style>
    </head>
    <body>
    	<div class="d1"></div>
    	<div class="d2"></div>
    	<div class="d3"></div>
    	<div class="d4"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    CSS框模型,浮动,定位以及其他属性
    CSS基础知识点总结
    Html基础知识点
    CentOS7桌面版系统使用的一些小技巧
    win 执行puppet
    常用脚本总结
    Ansible小记
    Tampermonkey-让百度云下载飞起来
    安装zabbix 遇到的一些问题
    alias
  • 原文地址:https://www.cnblogs.com/zhangpang/p/9794417.html
Copyright © 2011-2022 走看看