CSS镶套效果思维方法

Css3动画transform变形的多种效果可以相互搭配再通过伪类可以设计展现许多有趣的和复杂的动画效果，两种不同的效果需要互相镶套展现效果，如下例可以实现元素边移动和边旋转的效果。

 <style>.CSSdohua{width:1000px;height :1000px;background:#00ffff;margin:auto;}.CSSdohua:hover .aa {transform:translateX(1000px);}.CSSdohua:hover .aa1{transform:translateX(1000px);transform: rotate(360deg);}</style><div class="CSSdohua"><div class="aa"><div class="aa1"><p>我旋转啦</p></div></div></div>可实现一边移动一边旋转的效果，思维是使用镶套来实现的，通过在移动的基础上给他的子元素一个旋转的效果以达到视觉效果，其他效果也能通过这种思维方式来实现，值得注意的是这种方法在两个不同的效果所在元素是父子关系，在不同等级上。

CSS镶套效果思维方法

Css3动画transform变形的多种效果可以相互搭配再通过伪类可以设计展现许多有趣的和复杂的动画效果，两种不同的效果需要互相镶套展现效果，如下例可以实现元素边移动和边旋转的效果。

 <style>.CSSdohua{width:1000px;height :1000px;background:#00ffff;margin:auto;}.CSSdohua:hover .aa {transform:translateX(1000px);}.CSSdohua:hover .aa1{transform:translateX(1000px);transform: rotate(360deg);}</style><div class="CSSdohua"><div class="aa"><div class="aa1"><p>我旋转啦</p></div></div></div>可实现一边移动一边旋转的效果，思维是使用镶套来实现的，通过在移动的基础上给他的子元素一个旋转的效果以达到视觉效果，其他效果也能通过这种思维方式来实现，值得注意的是这种方法在两个不同的效果所在元素是父子关系，在不同等级上。