scale()拡大

実行結果

拡大させます。

プログラム

  HTML
  <input type="checkbox" id="in1">scale(2,3)
  <div class="div0 div1">div1</div>
  
/*CSS*/
.div0{
  width:  100px; height: 30px;/*箱の大きさです*/
  background-color: #842;
  position: relative;top: 0vw;left: 30vw;/**/
  transition: all 2s;}/*経過時間*/
#in1:checked ~ .div1{/*スイッチ1が入ったとき*/
  transform: scale(2,3);}/*拡大*/ 

scale(x,y)
x方向拡縮
y方向拡縮

scale()縮小

実行結果

縮小します。

プログラム

HTML
<input type="checkbox" id="in2">scale(0.5,0.3)
<div class="div0 div2">div2</div>
  
/*CSS*/
.div0{
width:  100px; height: 30px;/*箱の大きさです*/
background-color: #842;
position: relative;top: 0vw;left: 30vw;/**/
transition: all 2s;}/*経過時間*/
#in2:checked ~ .div2{/*スイッチ2が入ったとき*/
transform: scale(0.5,0.3);}/*縮小*/