CSS3.0中关于transform的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_11116/article/details/82565579

本文详细介绍了CSS3中的变换属性，包括translate、translateX、translateY、rotate、scale、scaleX、scaleY、skew、skewX、skewY及matrix等。通过实例展示了这些属性如何应用于网页元素上实现各种视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>transform：css3.0新标准中的一些属性</title>
	<style type="text/css">
		.menu ul {
		    border-top: 2px solid #f5f5f5; padding: 0 10px;
		    margin: 0;
		 }
		 
		 .menu ul li {
		 	padding: 0; margin: 0; list-style: none;
		 }
		 
		 .menu ul li a{
		    color: #fff; float: left; margin: 0 5px; font-size: 14px; width: 65px;
		    height: 50px; line-height: 50px; text-align: center; padding: 10px 5px; background: #151515;
		    border-radius: 0 0 5px 5px;  -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
		    box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
		    text-shadow: 0 1px 1px #686868;
		    text-decoration: none;
		 }
		 .menu ul li.translate a{
		    background: #2EC7D2;
		 }
		 .menu ul li.translate-x a {
		    background: #8FDD21;
		 }
		 .menu ul li.translate-y a {
		    background: #F45917;
		 }
		 .menu ul li.rotate a {
		    background: #D50E19;
		 }
		 .menu ul li.scale a {
		    background: #cdddf2;
		 }
		 .menu ul li.scale-x a {
		   background: #0fDD21;
		 }
		 .menu ul li.scale-y a {
		   background: #cd5917;
		 }
		 .menu ul li.skew a {
		   background: #519;
		 }
		 .menu ul li.skew-x a {
		   background: #D50;
		 }
		 .menu ul li.skew-y a {
		   background: #E19;
		 }
		 .menu ul li.matrix a {
		   background: #919;
		 } 
		 
		 /* x-轴偏移*/
		 .menu ul li.translate-x a:hover {
			 -moz-transform: translateX(-10px);
		     -webkit-transform: translateX(-10px);
		     -o-transform: translateX(-10px);
		     -ms-transform: translateX(-10px);
		     transform: translateX(-10px);
		 }
		 
		 /* y-轴偏移*/
		 .menu ul li.translate-y a:hover {
			 -moz-transform: translateY(-10px);
		     -webkit-transform: translateY(-10px);
		     -o-transform: translateY(-10px);
		     -ms-transform: translateY(-10px);
		     transform: translateY(-10px);
		 }
		 /* x/y 轴都偏移*/
		 .menu ul li a:hover {
			 -moz-transform: translate(-10px,-10px);
		     -webkit-transform: translate(-10px,-10px);
		     -o-transform: translate(-10px,-10px);
		     -ms-transform: translate(-10px, -10px);
		     transform: translate(-10px,-10px);
		 }
		 
		 /* 角度旋转 */
		 .menu ul li.rotate a:hover {
		 	-moz-transform: rotate(45deg);
		    -webkit-transform: rotate(45deg);
		    -o-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		    transform: rotate(45deg);
		 }
		 
		 /* 缩放  缩放都是以原元素中心点为参考点的 */
		 .menu ul li.scale a:hover {
		 	-moz-transform: scale(0.8,0.8);
		    -webkit-transform: scale(0.8,0.8);
		    -o-transform: scale(0.8,0.8);
		    -ms-transform: scale(0.8,0.8);
		    transform: scale(0.8,0.8); 
		 }	
		 .menu ul li.scale-x a:hover {
		 	-moz-transform: scaleX(0.8);
		    -webkit-transform: scaleX(0.8);
		    -o-transform: scaleX(0.8);
		    -ms-transform: scaleX(0.8);
		    transform: scaleX(0.8); 
		 }	
		 .menu ul li.scale-y a:hover {
		 	-moz-transform: scaleY(1.2);
		    -webkit-transform: scaleY(1.2);
		    -o-transform: scaleY(1.2);
		    -ms-transform: scaleY(1.2);
		    transform: scaleY(1.2); 
		 }	
		 
		 /* 旋转 */
		 .menu ul li.skew a:hover {
		     -moz-transform: skew(45deg,15deg);
		     -webkit-transform: skew(45deg,15deg);
		     -o-transform: skew(45deg,15deg);
		     -ms-transform: skew(45deg,15deg);
		     transform: skew(45deg,15deg);          
		  }
		  
		  /** transform:skewX(x) */
	    .menu ul li.skew-x a:hover {
		    -moz-transform: skewX(-30deg);
		    -webkit-transform: skewX(-30deg);
		    -o-transform: skewX(-30deg);
		    -ms-transform: skewX(-30deg);
		    transform: skewX(-30deg);          
		 }
	  
		  /** transform:skewY(y) */
		 .menu ul li.skew-y a:hover {
		    -moz-transform: skewY(30deg);
		    -webkit-transform: skewY(30deg);
		    -o-transform: skewY(30deg);
		    -ms-transform: skewY(30deg);
		    transform: skewY(30deg);          
		 }
		
		
		.menu ul li.matrix a:hover {
	    -moz-transform: matrix(1,1,-1,0,0,0);
	    -webkit-transform: matrix(1,1,-1,0,0,0);
	    -o-transform: matrix(1,1,-1,0,0,0);
	    -ms-transform: matrix(1,1,-1,0,0,0);
	    transform: matrix(1,1,-1,0,0,0);          
	  }
	</style>
  </head>
  
  <body>
    <div class="menu">
	    <ul class="clearfix">
	      <li class="item translate"><a href="#">Translate</a></li>
	      <li class="item translate-x"><a href="#">TranslateX</a></li>
	      <li class="item translate-y"><a href="#">TranslateY</a></li>
	      <li class="item rotate"><a href="#">Rotate</a></li>
	      <li class="item scale"><a href="#">Scale</a></li>
	      <li class="item scale-x"><a href="#">ScaleX</a></li>
	      <li class="item scale-y"><a href="#">ScaleY</a></li>
	      <li class="item skew"><a href="#">Skew</a></li>
	      <li class="item skew-x"><a href="#">SkewX</a></li>
	      <li class="item skew-y"><a href="#">SkewY</a></li>
	      <li class="item matrix"><a href="#">Matrix</a></li>
	    </ul>
  	</div>
  </body>
</html>