1、css3 3D样式
-
x轴旋转
rotateX(30deg) -
y轴旋转
rotateY(30deg)
x轴旋转
<style>
*{
font-family: 微软雅黑;
}
.div1{
width:256px;
height:256px;
}
.div1 img{
display: block;
}
</style>
<script src="/bootstrap4/jquery.min.js"></script>
</head>
<body>
<div class="div1">
<img src="/img/dog.png">
</div>
</body>
<script>
$('.div1').click(function(){
s=0;
v=1;
setInterval(function(){
s+=v;
$('.div1').css({'transform':'rotateX('+s+'deg)'});
},100);
});
</script>
y轴旋转
<script>
$('.div1').click(function(){
s=0;
v=1;
setInterval(function(){
s+=v;
$('.div1').css({'transform':'rotateY('+s+'deg)'});
},100);
});
</script>
2、多栏样式
- column-count #规定元素应该被分隔的列数
- column-gap #规定列之间的间隔。
- column-rule #设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
.div1{
width:1200px;
height:200px;
background: #ddd;
margin:0 auto;
padding:5px;
}
p{
column-count:2;
column-gap:40px;
column-rule:3px solid #ff0;
}
3、轮廓样式
- outline: 1px solid #f00;
- outline-offset: 20px;
轮廓与边框有两点不同:
1.轮廓不占用空间
2.轮廓可能是非矩形
.div1{
width:256px;
height:256px;
margin:50px;
border:5px solid #f00;
overflow:hidden;
outline:50px solid #00f;
outline-offset:100px;
}
</style>
</head>
<body>
<div class="div1">
<img src="/img/dog.png">
</div>
1、
1、
1、
1、
1、
1、