/* 旋转 */
div:nth-of-type(3):active {
/* 设置旋转轴心origin:
1.x,y
2.关键字:left,top,right,bottom,center*/
/* transform-origin: right top;
transform:rotate(150deg); */
}
div:nth-of-type(3):active {
/* transform:rotate(150deg); */
/* 同时添加多个transform属性,中间用空格分割,旋转会将当前的坐标系也旋转了。 */
/* 建议先添加移动,再添加旋转效果。 */
transform:rotate(-150deg) scale(0.5);
}
origin:扑克牌,实现散开酷炫效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扑克牌效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.pxBox {
width: 155px;
height: 219px;
position: relative;
margin: 300px auto;
background-color: #006400;
}
.pxBox>img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* 添加过渡效果 */
transition: transform 2s;
transform-origin: right top;
}
/* 添加鼠标移动,上移的效果 */
.pxBox:hover>img:nth-last-of-type(1) {
transform: rotate(60deg);
}
.pxBox:hover>img:nth-last-of-type(2) {
transform: rotate(120deg);
}
.pxBox:hover>img:nth-last-of-type(3) {
transform: rotate(180deg);
}
.pxBox:hover>img:nth-last-of-type(4) {
transform: rotate(240deg);
}
.pxBox:hover>img:nth-last-of-type(5) {
transform: rotate(300deg);
}
.pxBox:hover>img:nth-last-of-type(6) {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="pxBox">
<img src="../images/puke01.png" alt="">
<img src="../images/puke02.png" alt="">
<img src="../images/puke03.png" alt="">
<img src="../images/puke04.png" alt="">
<img src="../images/puke01.png" alt="">
<img src="../images/puke02.png" alt="">
</div>
</body>
</html>
盾牌九宫格效果例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加多个transform:14盾牌效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #31965b;
}
.box {
width: 340px;
margin: 100px auto ;
}
.box >img{
transition: transform 2s;
}
.box>img:nth-of-type(1){
transform: translate(100px ,10px) rotate(60deg);
}
.box>img:nth-of-type(2){
transform: translate(-100px ,100px) rotate(-60deg);
}
.box>img:nth-of-type(3){
transform: translate(-100px ,-60px) rotate(90deg);
}
.box>img:nth-of-type(4){
transform: translate(10px ,60px) rotate(-40deg);
}
.box>img:nth-of-type(5){
transform: translate(90px ,30px) rotate(70deg);
}
.box>img:nth-of-type(6){
transform: translate(-60px ,-20px) rotate(20deg);
}
.box>img:nth-of-type(7){
transform: translate(20px ,70px) rotate(60deg);
}
.box>img:nth-of-type(8){
transform: translate(60px ,40px) rotate(160deg);
}
.box>img:nth-of-type(9){
transform: translate(10px ,-50px) rotate(-160deg);
}
.box:hover>img{
transform: none;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/thermostat_cold_off.png">
<img src="../images/thermostat_cold_on.png">
<img src="../images/thermostat_hot_off.png">
<img src="../images/thermostat_hot_on.png">
<img src="../images/thermostat_cold_off.png">
<img src="../images/thermostat_cold_off.png">
<img src="../images/thermostat_hot_on.png">
<img src="../images/thermostat_cold_off.png">
<img src="../images/thermostat_hot_on.png">
</div>
</body>
</html>