用CSS3的transform来做旋转和缩放(含3D)

CSS3的transform实在是太赞了,可以直接对元素进行移动、缩放、旋转等操作,因为transform是对元素进行渲染上的变形,而非dom操作,性能也不错,在现代浏览器还可以支持硬件加速,更佳!

rotate 2d普通旋转

定义 2D 旋转,在参数中规定角度。
rotate 2d普通旋转

<style type="text/css"> .rotate2d {width:150px;margin:40px;-webkit-transform: rotate(45deg);transform: rotate(45deg);} </style> <img src="http://www.jshacker.com/pull/5/83496780.jpg" alt="rotate 2d普通旋转" class="rotate2d" />

rotate 3d旋转

rotate3d(x,y,z,angle) 定义 3D 旋转。使用rotateX()函数允许一个元素围绕X轴旋转;rotateY()函数允许一个元素围绕Y轴旋转;最后rotateZ()函数允许一个元素围绕Z轴旋转。接下来我们简单的了解一下这三个旋转函数。
鼠标经过图片看看:

rotate 3d旋转
<style type="text/css"> .photo-container { -webkit-perspective: 1200px; /* 透视视图 */ perspective: 1200px; /* 透视视图 */ width:150px; } .rotate-box { position:relative; left:10%; -webkit-transform-style: preserve-3d; /* 3D 转换 */ transform-style: preserve-3d; /* 3D 转换 */ transition:1s ease; /* 转换效果持续 1秒 */ } .rotate-box:after { content:' '; display:block; width:100%; -webkit-transform:rotateX(90deg); transform:rotateX(90deg); background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); } .rotate-box img {width:150px;height:150px;} .photo-container:hover .rotate-box { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } </style> <div class="photo-container"> <div class="rotate-box"> <img src="http://www.jshacker.com/pull/5/83496780.jpg" alt="rotate 3d旋转" /> </div> </div>

scale 2d普通缩放

scale(x,y) 定义 2D 缩放转换。
鼠标经过图片看看:

scale 2d普通缩放
<style type="text/css"> .scale2d {width:150px;margin-left:20px;transition:1s ease; /* 转换效果持续 1秒 */} .scale2d:hover {-webkit-transform: scale(2, 2);transform: scale(2, 2);} /*这里如果x,y轴缩放的比例一样,可以简写为scale(2)*/ </style> <img src="http://www.jshacker.com/pull/5/83496780.jpg" alt="scale 2d普通缩放" class="scale2d" />

scale 3d缩放

scale3d(x,y,z) 定义 3D 缩放转换。CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数,当scale3d()中X轴和Y轴同时为1,即scale3d(1,1,sz),其效果等同于scaleZ(sz)。通过使用3D缩放函数,可以让元素在Z轴上按比例缩放。默认值为1,当值大于1时,元素放大,反之小于1大于0.01时,元素缩小。
鼠标经过图片看看:

scale 3d缩放-1 scale 3d缩放-2
<style type="text/css"> .scale3d-stage { position:relative; width: 300px; height: 300px; -webkit-perspective: 1200px; /* 透视视图 */ perspective: 1200px; /* 透视视图 */ } .scale3d-box { position:absolute; top: 10%; left: 10%; -webkit-transform-style: preserve-3d; /* 3D 转换 */ transform-style: preserve-3d; /* 3D 转换 */ } .scale3d-1 { width:150px; position:absolute; opacity: 0.5; } .scale3d-2 { width:150px; position:absolute; z-index:2; transition:1s ease; /* 转换效果持续 1秒 */ } .scale3d-stage:hover .scale3d-2 { -webkit-transform: scaleZ(5) rotateX(45deg); transform: scaleZ(5) rotateX(45deg); } </style> <div class="scale3d-stage"> <div class="scale3d-box"> <img src="http://www.jshacker.com/pull/5/83496780.jpg" alt="scale 3d缩放-1" class="scale3d-1" /> <img src="http://www.jshacker.com/pull/5/83496780.jpg" alt="scale 3d缩放-2" class="scale3d-2" /> </div> </div>

相关阅读